Legacy Javascript Widget accessibility

⚠️
This guide describes the legacy Recharge JavaScript subscription widget, which is no longer officially supported or under active development. It remains available for merchants who continue to use the legacy widget. Recharge recommends using the current Recharge subscription widget for new implementations. Recharge Support may have limited ability to troubleshoot issues related to the legacy widget.

This article covers accessibility options available with the Legacy Javascript Widget's Document Object Model (DOM).

📘
Platform:

Shopify Checkout Integration stores using a Shopify 1.0 theme

Migrated Shopify Checkout Integration stores using a Shopify 1.0 theme

Accessibility options with the Legacy Javascript Widget

The following list outlines some of accessibility options that exist when using the Legacy Javascript 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 Legacy Javascript 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>