cferdinandi/tabby

Keyboard navigation issue

klues opened this issue · 3 comments

klues commented

I use tabby in my project with currently four tabs and found out that there is an issue with keyboard navigation if there are navigateable items on the tabs.
See the following example: https://jsfiddle.net/eseac98a/7/

  • use Tab in order to navigate through the elements on the test page
  • if I press Tab on button1 I am suddenly on the next tab
  • if tab 3 ("seasons") is active and I tab through the tab-links above after pressing Tab with active link "seasons" -> i am suddenly on tab 1 ("superheros") again.

I fixed the problem with display:none and display:block in the css, see: https://jsfiddle.net/eseac98a/9/

cferdinandi commented

This is how tabby was designed to work, and at the time, I thought this was better for accessibility. After having some conversations with accessibility expert @scottaohara, though, I've realized I'm 100% wrong about this approach.

I'll fix this in a future release. No target date for completion.

cferdinandi commented

Quick update: a complete rewrite of this is coming tomorrow.

cferdinandi commented

v12 is now live and fixes this issue: https://github.com/cferdinandi/tabby/releases/tag/v12.0.0

  • 👍1