Use live region to announce recipient form

[fredma]

PR Summary:

This PR implements support for accessibility by announcing the recipient form when the checkbox is ticked/unticked on the gift card product page

Why are these changes introduced?

Fixes https://github.com/Shopify/core-issues/issues/55523

What approach did you take?

The original plan was to use aria-expanded and aria-controls but those are not supported for a checkbox role. To make it work, we have to use a supported role e.g. button but to align with UX design, we are keeping the checkbox as planned.

So the alternative is now using a live region to announce the form when the checkbox is ticked/unticked

Other considerations

Decision log

#	Decision	Alternatives	Rationale	Downsides
1	use live region	aria-expanded	aria-expanded is not supported for checkbox role

Visual impact on existing themes

No impact on themes unless a11y feature is turned on.
See video

Testing steps/scenarios

• Load a gift card
• Turn on a11y feature e.g. VoiceOver on Mac
• Focus on the checkbox, tick and check the a11y prompt output

Demo links

• Store

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ludoboludo]

Looking good 👍 I'd just suggest a potential different approach but in the end it seem to work either way 🙂

[ludoboludo]

I don't believe this is needed. From the mdn docs about role="status":

[ludoboludo]

Here I think we could potentially approach it differently. What you have now is a toggling between hidden and not hidden.
We could instead, have this p always there, visually hidden the way you have it and use the JS, not to toggle aria-hidden, but to inject the text.

Because it's a role="status", anytime something is added in that container, it will announce it if I'm not mistaking.

For the strings, you can add them in theme.liquid like we do for:

      window.accessibilityStrings = {
        imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
        shareSuccess: `{{ 'general.share.success_message' | t }}`,
        pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
        playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
      };

This way it follows the pattern we've used in other part of the theme (eg: SKU on product page)

[ludoboludo]

Since usually it seem to be a pattern to have some feedback when toggling ON and OFF (aria hidden for example), I'd consider having a window.accessibilityStrings.recipientFormCollapsed or something.

Other than that it's looking good 👍 Thanks for the changes :)

[ludoboludo]

Looking good, i'll request the translations.

Thanks again for doing the work Fred 👍

[mzarud]

Looked this over and tested, all works as expected. 👍

[Walla-dev]

Is it possible to add this functionality to a highly customized, older theme? I put the recipient form on a separate digital gift card product template and attached custom product properties to it, but that didn't seem to affect sending the gift card to the intended recipient. Would I have to make a custom app to accomplish this using the storefront API?

It seems native to the Shopify platform now since the "Gift Card Confirmation" notification now includes this liquid tag in the notification template: {% if gift_card.recipient %} - but what exactly do I need in place for it to occur?

I have both of these included in my theme now:
gift-card-recipient-form.liquid
recipient-form.js