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

Accessibility: add label under icons on mobile navbar #3119

Open
Dehelssey opened this issue Jan 1, 2025 · 3 comments · May be fixed by #3120
Open

Accessibility: add label under icons on mobile navbar #3119

Dehelssey opened this issue Jan 1, 2025 · 3 comments · May be fixed by #3120
Labels
c: a11y Enhancing accessibility c: bug Something isn't working

Comments

@Dehelssey
Copy link

Accessibility best practices states that mobile navbar items should have a label.

We should at least offer an option to display them.

Or, even better, display them by default with an option to hide them
@Dehelssey Dehelssey added c: bug Something isn't working s: pending triage Pending Triage labels Jan 1, 2025
@userquin
Copy link
Member

userquin commented Jan 1, 2025 •
edited
Loading

We have the aria-label, we should add aria-hidden="true" to the icons div/span: do you mean adding a new option to display the text, something like this?

Image
https://m3.material.io/components/navigation-bar/overview

@Dehelssey
Copy link
Author

Yeah, this exactly.

I assumed the labels were in the DOM but hidden in CSS on mobile so yeah we should have them visible (idealy by default with an option to hide them as they are now)

@shuuji3 shuuji3 added c: a11y Enhancing accessibility and removed s: pending triage Pending Triage labels Jan 1, 2025
@shuuji3 shuuji3 linked a pull request Jan 1, 2025 that will close this issue
Open
@shuuji3
Copy link
Member

shuuji3 commented Jan 1, 2025 •
edited
Loading

I tried implementing this label by #3119 (my first PR in 2025). Any feedback is welcome 🙂

@shuuji3 shuuji3 mentioned this issue Jan 3, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
c: a11y Enhancing accessibility c: bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(a11y): show bottom nav button labels elk-zone/elk
3 participants
@shuuji3 @userquin @Dehelssey