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:

The <reload-icon> and popup label <span> elements are wrapped in a button to make these elements more focused.
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.

The <div> element with class .rc_popup__close has been removed.
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>

New JavaScript subscription widget template

Old JavaScript subscription widget template

Need Help? Contact Us