Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[Bug][a11y]: Tabs overflow component has action buttons that don't necessarily need keyboard focus #3270

Closed
1 task done
dineshy87 opened this issue Jun 2, 2023 · 2 comments · Fixed by #4144 or #4165
Closed
1 task done
Labels
a11y Issues related to accessibility bug Something isn't working Component: Tabs good first issue Good for newcomers help wanted Extra attention is needed

Comments

@dineshy87
Copy link

Code of conduct

  • I agree to follow this project's code of conduct.

Impacted component(s)

sp-tabs-overflow

Expected behavior

Please take overflow related previous and next buttons out of taborder by using tabindex="-1" on them. They're also not labelled, so please add aria-label to both the buttons.

Actual behavior

Having tabstops before the tabs component to reveal any hidden tabs seems unnecessary. Keyboard users are able to use arrow keys to navigate through all the tabs and the visual affordance allows them to know that there are more tabs. For screen reader users, the number of tabs is already conveyed by the tablist. So, overall addition of two tabstops (for back and forward buttons) is not necessary. Even on mobile, using a screenreader, a user can go through all the tabs without needing to use these buttons.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

No response

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

@dineshy87 dineshy87 added bug Something isn't working triage An issue needing triage labels Jun 2, 2023
@Westbrook
Copy link
Contributor

Westbrook commented Jun 2, 2023

@monkeyjabs, looks like I took us a little too far on this one 🙈. Could I convince you to check this out in you cozy post release haze that you've got coming up?

@najikahalsema najikahalsema added Component: Tabs a11y Issues related to accessibility labels Jun 12, 2023
@najikahalsema
Copy link
Collaborator

@monkeyjabs, looks like I took us a little too far on this one 🙈. Could I convince you to check this out in you cozy post release haze that you've got coming up?

Can you provide some context on this comment @Westbrook ? 😅

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
a11y Issues related to accessibility bug Something isn't working Component: Tabs good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
3 participants