Fix: Losing focus inside tabs - Githubissues

10up / component-library

A library of barebones front-end components built with WordPress and accessibility in mind.

https://baseline.10up.com/

MIT License

59 stars 12 forks source link

Fix: Losing focus inside tabs #37

Closed Firestorm980 closed 3 years ago

Firestorm980 commented 3 years ago

Description of the Change

Updates demo to include focusable elements for future testing
Adds display: none; to tabs that are hidden. As as https://w3c.github.io/aria-practices/examples/tabs/tabs-1/tabs.html

Benefits

Fixes https://github.com/10up/component-library/issues/18
Fixes accessibility compliance

Possible Drawbacks

None known.

Verification Process

Open the demo page for tabs after compile
Navigate the page with tab and keyboard
Confirm that only the tabpanel and content inside the tabpanel are focusable
Confirm that focus continues in the natural page order after the panel content
Confirm that only parent tab from tab list is focused in reverse
Confirm that focus continues in reverse page order after tab list

Checklist:

[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[x] All new and existing tests passed.

https://github.com/10up/component-library/issues/18

nicholasio commented 3 years ago

@Firestorm980 can you give me permission to push commits to your PR? Also, you should be able to use this repo directly instead of creating a fork, let me know if you don't have push permission to this repo.