Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Aside in skeleton template to be more accessible #2639

Merged

Conversation

lb-
Copy link
Contributor

@lb- lb- commented Nov 7, 2024

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

  • I've read the Contributing Guidelines
  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've added a changeset if this PR contains user-facing or noteworthy changes
  • I've added tests to cover my changes N/A
  • [] I've added or updated the documentation N/A

References

Copy link
Contributor

@scottdixon scottdixon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @lb-!

@wizardlyhel wizardlyhel merged commit 9979415 into Shopify:main Nov 26, 2024
6 checks passed
@lb- lb- deleted the fix/skeleton-template-aside-accessibility branch November 27, 2024 10:20
@lb-
Copy link
Contributor Author

lb- commented Nov 27, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants