JavaScript subscription widget accessibility updates

To enhance accessibility and better serve users who navigate websites using a keyboard, the JavaScript subscription widget's DOM (Document Object Model) has been updated. The updates include the following:

  1. The <reload-icon> and popup label <span> elements are wrapped in a button to make these elements more focused.
  2. The <div> element with class .rc_popup__block is wrapped with a <focus-trap> element to trap focus inside the popup modal.
  • Focus will be trapped in the popup when selecting the above button using the Enter key.
  • Focus will be released when exiting the popup using the Esc key.
  • The <div> element with class .rc_popup__block uses class .active when activated with the keyboard.
  1. The <div> element with class .rc_popup__close has been removed.
  2. The <br> element after the <div> element with class .rc_popup__how_it_works has been removed.

Refer to the following code samples to compare the new JavaScript subscription widget template to the old template.

New JavaScript subscription widget template

<template>
 <div v-if="widgetSettings.show_subscription_details" class="rc_popup">
   <div class="rc_popup__hover" :style="popupHoverStyle">
     <button ref="detailsButtonRef" class="rc_popup_label_wrapper row" :aria-label="popupLabel" aria-expanded="false" aria-controls="rc_popup__block__content" @keyup.enter="show = true" @click.prevent.self>
       <reload-icon v-if="rechargeIcon.visible" data-test-popup-icon :fill="rechargeIcon.fill" />
       <span class="rc_popup__label">{{ popupLabel }}</span>
     </button>
     <focus-trap ref="focusTrap" :active="false" :initial-focus="() => $refs.learnMoreContentRef" :click-outside-deactivates="() => true" :escape-deactivates="true" :fallback-focus="() => $refs.detailsButtonRef" @deactivate="show = false">
       <div ref="popupBlockRef" :class="{ active: show }" class="rc_popup__block" :style="popupBlockStyle">
         <div class="rc_popup__block__content">
           <div ref="learnMoreContentRef" class="rc_popup__how_it_works" v-html="howItWorksHTML" />
           <a v-if="learnMoreLink.visible" ref="learnMoreLinkRef" :style="{ color: learnMoreLink.color }" class="rc_popup__learn_more" :href="learnMoreLink.href" target="_blank" rel="noopener noreferrer">
{{ learnMoreLink.text }}</a>
         </div>
         <div v-if="widgetSettings.show_poweredby" class="rc_popup__block__footer">
           <a :href="powerByHref" target="_blank" rel="noopener noreferrer" class="tooltip-badge">
             <span class="powered-by">Powered by</span>
             <recharge-logo />
           </a>
         </div>
       </div>
     </focus-trap>
   </div>
 </div>
</template>

Old JavaScript subscription widget template

<template>
 <div v-if="widgetSettings.show_subscription_details" class="rc_popup">
   <div class="rc_popup__hover" :style="popupHoverStyle">
     <reload-icon v-if="rechargeIcon.visible" data-test-popup-icon :fill="rechargeIcon.fill" />
     <span class="rc_popup__label">{{ popupLabel }}</span>
     <div ref="popupBlockRef" class="rc_popup__block" :style="popupBlockStyle">
       <div class="rc_popup__block__content">
         <div class="rc_popup__close" style="display: none">x</div>
         <div class="rc_popup__how_it_works" v-html="howItWorksHTML" />
         <br />
         <a
           v-if="learnMoreLink.visible"
           :style="{ color: learnMoreLink.color }"
           class="rc_popup__learn_more"
           :href="learnMoreLink.href"
           target="_blank"
           rel="noopener noreferrer"
           >{{ learnMoreLink.text }}</a
         >
       </div>
       <div v-if="widgetSettings.show_poweredby" class="rc_popup__block__footer">
         <a :href="powerByHref" target="_blank" rel="noopener noreferrer" class="tooltip-badge">
           <span class="powered-by">Powered by</span>
           <recharge-logo />
         </a>
       </div>
     </div>
   </div>
 </div>
</template>

Need Help? Contact Us