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.

Sign up for GitHub

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

Jump to bottom

Improve accessibility of status message component #607

Open

benjystanton opened this issue Sep 27, 2024 · 1 comment

Assignees

Member

benjystanton commented Sep 27, 2024

Following some accessibility recommendations and some rough implementation notes about how to improve the accessibility of the status message component.

I'm going to create a branch and start trying to implement some of the changes, so they can be reviewed and agreed.

Including…

Updating the component
Updating the component documentation page

benjystanton self-assigned this

Member Author

benjystanton commented Sep 27, 2024 •

edited

Loading

Changes so far…

Docs page

expanded the accessibility advice
added the HO design system date mark-up to examples that a date

Component

Removed an extra div
added a h2 and tweaked CSS styles for narrow viewports
added role="region"
added aria-labelledby="hods-status-message-status"
added id="hods-status-message-status" to associate the region with the h2

Next steps

review from developer to make sure changes to React are done correctly (probably not!)
remove h2 from instances of component if there is no other content
Check with accessibility assurance team
Check content with content designer
Decide how best to style h2 on narrower screens because switching to h2 does cause visual difference

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment