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

Add Heading component #99

Merged
merged 1 commit into from
Mar 18, 2022
Merged

Add Heading component #99

merged 1 commit into from
Mar 18, 2022

Conversation

mjbp
Copy link
Contributor

@mjbp mjbp commented Dec 6, 2021

Adds a Heading component that accepts a level and className props.

The component checks if there are child element nodes and adds a wrapper span[role="text"] to improve screen reader announcements.

Full description in #98

@mjbp
Copy link
Contributor Author

mjbp commented Dec 6, 2021

A bit more context - role=text is non-spec (it didn't make it into aria 1.1 but was discussed in detail but things got complicated especially around which elements it would be allowed on), and it fails automated tests in axe-core pre version 4.2 (which means current Lighthouse will flag it, as well as many other tools).

NHS design system decided to use it regardless, and the exception has been added to axe-core in 4.2.

dequelabs/axe-core#1597
nhsuk/nhsuk-frontend#735
w3c/aria#870

@mjbp mjbp merged commit a256ea1 into master Mar 18, 2022
@mjbp mjbp deleted the feature/98-heading branch March 18, 2022 17:21
@mjbp mjbp mentioned this pull request Mar 18, 2022
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.

2 participants