Add aria-expanded and aria-control attribbutes to gift card checkbox

[antiBaconMachine]

PR Summary:

Add aria-expanded and aria-control attribbutes to gift card checkbox

Why are these changes introduced?

The intent here is to give context to screen readers that the gift card recipient form is being hidden and shown.

What approach did you take?

I'm using the example here https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/ as a reference but I'm not getting great results from mac voiceover. Android talkback is better, when I highlight the checkbox it correctly announces the collapsed/expanded state. It does seem that voiceover is lacking in support for aria-expanded.

Other considerations

I should note that it is only the checkbox that gets the state not the label which would be more commonly selected as it's bigger. I think this is a good first step to solving this issue, though we may want to do more.

Decision log

#	Decision	Alternatives	Rationale	Downsides
1

Visual impact on existing themes

None

Testing steps/scenarios

Activate your preferred screenreader and listen to the results as you toggle the checkbox on and off.

Demo links

• Store
• Editor

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

[metamoni]

I think this isn't working as you'd expect because it's missing a role. aria-expanded works with the following associated roles. A button, for example, has an implicit role, so you wouldn't need to add one. But for an element without an implicit role, such as a div or input, the screen reader will require more context to understand what the widget does. The combobox role would probably be a good fit for this.

I'm not super familiar with this area, but I'd be happy to take a look at it myself if you add some detailed testing steps (some simple instructions on how to get to this screen/checkbox would be helpful). Feel free to reach out if you'd like to pair too.

[ludoboludo]

Here is how you'd go about testing the feature/fix: video

[metamoni]

Thanks, @ludoboludo. @antiBaconMachine and I have discussed this, as well as potential solutions. Here's a summary:

• we both agreed that a checkbox might not be the best element to use here
• I suggested changing the element to a button and using one of the following patterns: an accordion or a disclosure (which we use in the drawer menu)
• I suggested checking with UX to find a good pattern and adjust the design if needed

[ludoboludo]

Sweet, thanks for the update 🙂

[antiBaconMachine]

Thanks for the helpful feedback @metamoni. I've read around a bit more and if I understand correctly a checkbox is not a supported role for aria-expanded. As you pointed out we could perhaps use one of the approved roles. I'm not convinced combobox is the right role, I would have very specific expectations of how a combobox would work, i.e. a select box that also allows free text. Possibly we could just use something generic like button, but that doesn't seem right either.

Why is checkbox not a supported role for aria-expanded? I'm not sure, there is this mailing list question https://lists.w3.org/Archives/Public/public-aria/2016Feb/0066.html but to my eye there isn't a definitive answer in there.

In terms of testing this product can be used https://transmogriphy.myshopify.com/products/gift-card. The checkbox in question is the one labelled I want to send this as a gift

[bakura10]

I am facing some issues here as well. What about creating an aria-owns relationship between the checkbox input and the div that owns the content? I think the checkbox is the right element here for holding the decision :).

[fredma]

Superseded by #2672