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

feat(component): allow Alerts to be labelled by their header #1388

Merged
merged 1 commit into from
Apr 8, 2024

Conversation

leeBigCommerce
Copy link
Contributor

@leeBigCommerce leeBigCommerce commented Apr 8, 2024

What?

Adds an aria-labelledby to the Alert component, which is associated to the optional header.

Why?

  1. To provide screen readers with an accessible 'name' for the alert
  2. Also useful in tests, proving that the correct alert was selected

Screenshots/Screen Recordings

Before (notice no 'name' in the accessibility panel)

Screenshot 2024-04-08 at 11 14 51 am

After (notice new 'name' in the accessibility panel)

Screenshot 2024-04-08 at 11 14 26 am

Testing/Proof

New test: https://github.com/bigcommerce/big-design/pull/1388/files#diff-c8881538168695ea6e7ca5ba1d22e808a91da2fe5552072b18ede0869ebee815R91-R96

@leeBigCommerce leeBigCommerce marked this pull request as ready for review April 8, 2024 01:34
@leeBigCommerce leeBigCommerce requested review from a team as code owners April 8, 2024 01:34
@leeBigCommerce leeBigCommerce merged commit 54ba7d5 into bigcommerce:main Apr 8, 2024
10 checks passed
@leeBigCommerce leeBigCommerce deleted the alert-label branch April 8, 2024 23:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants