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.

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

Icon in the Help button should be hidden from screen readers #54803

Closed
huyenltnguyen opened this issue May 15, 2024 · 0 comments · Fixed by #54812
Closed

Icon in the Help button should be hidden from screen readers #54803

huyenltnguyen opened this issue May 15, 2024 · 0 comments · Fixed by #54812
Labels
help wanted Open for all. You do not need permission to work on these. platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. scope: a11y Threads for addressing accessibility issues. scope: UI Threads for addressing UX changes and improvements to user interface

Comments

@huyenltnguyen
Copy link
Member

Description

The icon in the Help button is only decorative and doesn't convey any information. It should have aria-hidden set to true so that screen readers can ignore it (I'm using VoiceOver and the icon is announced as "group").

Screenshot 2024-05-15 at 13 20 16

Affected page

Any pages that have the Help button.

Example: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-8.

Requirements

Add aria-hidden="true" to https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/assets/icons/help.tsx.
@huyenltnguyen huyenltnguyen added help wanted Open for all. You do not need permission to work on these. scope: a11y Threads for addressing accessibility issues. scope: UI Threads for addressing UX changes and improvements to user interface platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. labels May 15, 2024
@a2937 a2937 mentioned this issue May 15, 2024
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Open for all. You do not need permission to work on these. platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. scope: a11y Threads for addressing accessibility issues. scope: UI Threads for addressing UX changes and improvements to user interface
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ui): hide the help icon from the screen reader a2937/freeCodeCamp
1 participant
@huyenltnguyen