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
usesclass .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>
Updated 7 months ago