Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.45k stars 280 forks source link

Update Aside in skeleton template to be more accessible #2639

Closed lb- closed 3 days ago

lb- commented 3 weeks ago

WHY are these changes introduced?

The current Aside component will read 'times' (or even nothing) instead of 'close' when screen readers navigate to the close button.

While there are other accessibility issues with this template component, this is a quick win and it would be good for developers to get a head start with accessibility where possible.

WHAT is this pull request doing?

Adds aria-label to advise the button element of a custom label that's different to the element's content.

HOW to test your changes?

Set up the skeleton template to output locally, observe the close button in any Aside (such as the search dialog).

Before

Reminder: Some screen readers will not read anything for the 'times' symbol, but if they do they can read out things like 'multiply'.

Screenshot 2024-11-08 at 6 24 10 AM Screenshot 2024-11-08 at 6 23 44 AM

After

Screenshot 2024-11-08 at 6 25 23 AM Screenshot 2024-11-08 at 6 25 04 AM

Checklist

References

lb- commented 3 days ago

Thanks for reviewing & merging (inc. my other PRs).