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

Accessibility: active tab is differenciated only by color #3118

Open
Dehelssey opened this issue Jan 1, 2025 · 2 comments
Open

Accessibility: active tab is differenciated only by color #3118

Dehelssey opened this issue Jan 1, 2025 · 2 comments
Labels
c: a11y Enhancing accessibility c: bug Something isn't working

Comments

@Dehelssey
Copy link

The active tab in the bottom nav bar is only differenciated from the others by its color. It goes against accessibility best practices

Active tab should be highlighted with an additional marker: either the icon goes from linear to filled, or a small indicator could be displayed underneath (a dot or a bar for instance)

@Dehelssey Dehelssey added c: bug Something isn't working s: pending triage Pending Triage labels Jan 1, 2025
@shuuji3 shuuji3 added c: a11y Enhancing accessibility and removed s: pending triage Pending Triage labels Jan 1, 2025
@shuuji3
Copy link
Member

shuuji3 commented Jan 3, 2025

Yes, once the nav button labels are implemented in #3119, we can switch icons to filled-style ones. While some icons don't have filled styles (like hashtag icon #), we can distinguish the active button by making labels bold / adding highlights.

@Dehelssey
Copy link
Author

We can also have a background like on Material examples if we prefer.

Image

I'm more into dots below the tab but that's purely subjective

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: a11y Enhancing accessibility c: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants