Guides
API ReferenceTheme Engine ReferenceJavaScript SDK ReferenceRecharge Help Center

JavaScript subscription widget accessibility

The JavaScript subscription widget is continually being enhanced to improve accessibility and better serve users who navigate websites using a keyboard.

This article covers accessibility options available with the JavaScript subscription widget's document object model (DOM).

📘

Platform:

  • Shopify Checkout Integration or Migrated Shopify Checkout Integration stores using a Shopify 1.0 theme

Accessibility options with the JS widget

The following list outlines some of accessibility options that exist when using the JS subscription widget:

  • 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.

Widget template

The following code is a preview of the JS 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>

Updated 7 months ago

Need Help? Contact Us