-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
[Dashboard] (Accessibility) Adds an H1 tag with the dashboard title #135757
[Dashboard] (Accessibility) Adds an H1 tag with the dashboard title #135757
Conversation
e15e95a
to
e770c1e
Compare
a51fb15
to
4958dc3
Compare
4958dc3
to
942c0c1
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very straightforward, presentation team changes LGTM!
Pinging @elastic/kibana-accessibility (Project:Accessibility) |
💚 Build SucceededMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: cc @Heenawter |
SharedUX changes LGTM 👍 |
Related to #61870.
Summary
@elastic/kibana-presentation This PR adds an
<h1>
tag with the dashboard title for screen readers only and focuses on that title when navigating to the dashboard for the first time, as well as when the dashboard changes from view to edit mode - this helps give more context to the audio clues as the user switches between view modes.For example, whereas before clicking the
Edit
button would not give any audio message stating that the view mode switched, this will now trigger the<h1>
tag to be read out which will say something like "Dashboard - Editing<dashboard title name>
".Screen.Recording.2022-07-06.at.9.20.00.AM.mov
@elastic/shared-ux This PR also addresses the issues brought up with the sample dashboards in #61870. All sample dashboards start with a markdown element that has the name of the dashboard as a header of that panel - however, previously, this header was an
h3
element. To follow a11y standards, I switched this to anh2
element - note that this has style implications, as follows:Checklist
For maintainers