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

fix(a11y): Remove nav and radios in sidebar tabs #4456

Merged
merged 2 commits into from Aug 26, 2023

Conversation

Pytal
Copy link
Contributor

@Pytal Pytal commented Aug 24, 2023

☑️ Resolves

🚧 Tasks

Ref: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#sc1_label

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable

@Pytal Pytal added 3. to review Waiting for reviews accessibility Making sure we design for the widest range of people possible, including those who have disabilities labels Aug 24, 2023
@Pytal Pytal added this to the 8.0.0 milestone Aug 24, 2023
@Pytal Pytal self-assigned this Aug 24, 2023
@skjnldsv skjnldsv added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Aug 24, 2023
@Pytal Pytal added 3. to review Waiting for reviews bug Something isn't working and removed 2. developing Work in progress labels Aug 25, 2023
Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

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

Works with a screen reader, but a bit buggy with both screen reading and Tab navigation sometimes, because each tab button actually is 2 focusable elements: <input type="button"> and <label>. Though input has position absolute, it is still focusable.

@ShGKme
Copy link
Contributor

ShGKme commented Aug 25, 2023

With Tab navigation you can see sometimes 2 different focus styles

tabs-1

@ShGKme
Copy link
Contributor

ShGKme commented Aug 25, 2023

When actual button is button was selected, navigation with screen reader also goes through both elements.
The first is "Search tab button" and the second is "Search tab one of three"

tabs-2

Signed-off-by: Christopher Ng <chrng8@gmail.com>
Signed-off-by: Christopher Ng <chrng8@gmail.com>
@Pytal Pytal added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Aug 26, 2023
@Pytal Pytal merged commit 7cbf284 into master Aug 26, 2023
16 checks passed
@Pytal Pytal deleted the fix/a11y/app-sidebar-tabs branch August 26, 2023 00:17
@Pytal Pytal mentioned this pull request Aug 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release Ready to be released and/or waiting for tests to finish accessibility Making sure we design for the widest range of people possible, including those who have disabilities bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants