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

♿ a11y(tab-component): Keyboard interaction of tabs #1425

Open
1 task done
carolabes opened this issue Jun 20, 2024 · 8 comments · Fixed by #1432 · May be fixed by #1541
Open
1 task done

♿ a11y(tab-component): Keyboard interaction of tabs #1425

carolabes opened this issue Jun 20, 2024 · 8 comments · Fixed by #1432 · May be fixed by #1541
Assignees
@hirsch88
Labels
🐛 bug Something isn't working
Milestone
♿️ Accessibility

Comments

@carolabes
Copy link

carolabes commented Jun 20, 2024 •
edited
Loading

Description of this issue

  • Tabs cannot be accessed with the usual keys
tabs

How to fix it

  • Tab keys should be accessible with usual keys like TAB, Arrows and DELETE (see additional Informations)

Additional Information

Level A
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

Keyboard interaction: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#keyboard_interaction

Code of Conduct

  • I agree to follow this project's Code of Conduct
@carolabes carolabes added the ✨ feature New feature or request label Jun 20, 2024
@hirsch88
Copy link
Member

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#keyboard_interactions

@hirsch88
Copy link
Member

@carolabes We need to discuss this in our weekly.

There are 3 cases for the tabs

  1. Tabs with only links should work with tab and enter
  2. Tabs without any link should work with arrow keys
  3. But we also have a mixture like in the main nav bar, would do we there?

Moreover, we get the feeling that we are confusing the end user with multiple solutions

@hirsch88 hirsch88 added the 💬 ux & ds sync Topics for the weekly exchange between UX & DS Devs label Jul 18, 2024
@carolabes
Copy link
Author

Hi @hirsch88,
the technical implementation is important for people who cannot see the design. Based on the implementation, they can identify the element and know how to access it.
By definition, the tab changes parts of the page (see tab role definition). Technically we have only one use case here.

This means:

  1. Tabs with links only like our inpage navigation should be implemented as nav with link list.
  2. Tabs that change parts of the content such as the tab component or product slider should be implemented as tabs and thus be operable.
  3. In main nav bar no tabs are necessary, because it is a navigation. Here buttons and links are enough.

I understand your point that it can be confusing for the users, but still the technical implementation should be correct for the users who don't see the design.

If there are any questions, please do not hesitate to contact me.

@hirsch88 hirsch88 added 🐛 bug Something isn't working and removed ✨ feature New feature or request labels Aug 8, 2024
@hirsch88 hirsch88 self-assigned this Aug 8, 2024
@hirsch88
Copy link
Member

hirsch88 commented Aug 8, 2024

/cib

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 8, 2024

Branch fix/issue-1425 created!

github-actions bot added a commit that referenced this issue Aug 8, 2024
@github-actions
Create PR for #1425
8caf304
@github-actions github-actions bot mentioned this issue Aug 8, 2024
Merged
hirsch88 added a commit that referenced this issue Sep 5, 2024
@github-actions @hirsch88
♿ a11y(tabs, carousel): keyboard interaction (#1432)
d8c2bc4 
* Create PR for #1425

* fix(tabs): only show line when value exists

* fix(tabs): only show line when value exists

* fix(tabs): improve keyboard navigation according to a11y criterias

* chore: fix typo

* Create PR for #1417

* fix(carousel): implement role list and listitem to improve screenreaders

* fix(carousel): add missing aria controls

* fix(carousel): improve keyboard inputs and a11y criterias

* fix(carousel): improve keyboard inputs and a11y criterias

* chore: add missing unit test

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <[email protected]>
@carolabes
Copy link
Author

Checked on Baloise.ch: Accessing with right&left arrow key not possible

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#keyboard_interactions

@hirsch88 hirsch88 added this to the ♿️ Accessibility milestone Nov 21, 2024
@hirsch88
Copy link
Member

hirsch88 commented Dec 5, 2024

/cib

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 5, 2024

Branch fix/issue-1425 created!

github-actions bot added a commit that referenced this issue Dec 5, 2024
@github-actions
Create PR for #1425
2dfa013
@github-actions github-actions bot linked a pull request Dec 5, 2024 that will close this issue
Open
@hirsch88 hirsch88 removed the 💬 ux & ds sync Topics for the weekly exchange between UX & DS Devs label Dec 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hirsch88 hirsch88

Labels
🐛 bug Something isn't working
Projects
None yet
Milestone
♿️ Accessibility
3 participants
@hirsch88 @GinaBiondo-aperto @carolabes