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>

Need Help? Contact Us