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

doc: add missing ARIA label for button #37031

Merged
merged 1 commit into from
Jan 24, 2021
Merged

doc: add missing ARIA label for button #37031

merged 1 commit into from
Jan 24, 2021

Conversation

Trott
Copy link
Member

@Trott Trott commented Jan 23, 2021

The button for toggling light mode and dark mode has no text display.
Screen readers will read it as simply "button", making it not useful.
Add an aria-label attribute so it gets a better description.

@nodejs-github-bot nodejs-github-bot added the doc Issues and PRs related to the documentations. label Jan 23, 2021
@aduh95
Copy link
Contributor

aduh95 commented Jan 23, 2021

Fast-track to include it in #37020?

@aduh95 aduh95 added the fast-track PRs that do not need to wait for 48 hours to land. label Jan 23, 2021
@@ -25,7 +25,7 @@
<header>
<div class="header-container">
<h1>Node.js __VERSION__ Documentation</h1>
<button class="theme-toggle-btn" id="theme-toggle-btn" hidden>
<button class="theme-toggle-btn" id="theme-toggle-btn" aria-label="Toggle dark mode/light mode" hidden>
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<button class="theme-toggle-btn" id="theme-toggle-btn" aria-label="Toggle dark mode/light mode" hidden>
<button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode/light mode" hidden>

No strong opinion, but title also helps those who hover the element with their cursor.

Copy link
Member Author

Choose a reason for hiding this comment

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

Using title attribute for a tooltip is generally undesirable from an accessibility point of view. It's possible that a lot (most? all?) of the relevant concerns may be addressed in this particular situation by also having the aria-label attribute. But I'd want to look at it more closely. I'll add a tooltip in a follow-on PR (unless someone beats me to it).

@nodejs-github-bot
Copy link
Collaborator

@nodejs-github-bot
Copy link
Collaborator

The button for toggling light mode and dark mode has no text display.
Screen readers will read it as simply "button", making it not useful.
Add an aria-label attribute so it gets a better description.

PR-URL: nodejs#37031
Reviewed-By: Antoine du Hamel <[email protected]>
Reviewed-By: Darshan Sen <[email protected]>
@Trott
Copy link
Member Author

Trott commented Jan 24, 2021

Landed in 835b85d

@Trott Trott deleted the aria branch January 24, 2021 02:55
targos pushed a commit that referenced this pull request Feb 2, 2021
The button for toggling light mode and dark mode has no text display.
Screen readers will read it as simply "button", making it not useful.
Add an aria-label attribute so it gets a better description.

PR-URL: #37031
Reviewed-By: Antoine du Hamel <[email protected]>
Reviewed-By: Darshan Sen <[email protected]>
@targos targos mentioned this pull request Feb 2, 2021
targos pushed a commit that referenced this pull request May 1, 2021
The button for toggling light mode and dark mode has no text display.
Screen readers will read it as simply "button", making it not useful.
Add an aria-label attribute so it gets a better description.

PR-URL: #37031
Reviewed-By: Antoine du Hamel <[email protected]>
Reviewed-By: Darshan Sen <[email protected]>
@danielleadams danielleadams mentioned this pull request May 3, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
doc Issues and PRs related to the documentations. fast-track PRs that do not need to wait for 48 hours to land.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants