A11y: Keyboard navigation not possible on a section tabs

[mquandalle]

Past Issues Searched

• [X] I have searched open and closed issues to make sure that the bug has not yet been reported

Issue is a Bug Report

• [X] This is a bug report and not a feature request, nor asking for self-hosted support

Using official Plausible Cloud hosting or self-hosting?

Plausible Cloud from plausible.io

Describe the bug

I'm using Vimium to browse the web, which has a feature to associate a keyboard shortcut to every links present on the page.

It works for most links but not for a section tabs, exemple “map, countries, regions, cities” in the “Regions” section.

Expected behavior

vimium can detect that tabs are a clickable element

Screenshots

Environment

- OS: Linux
- Browser: Firefox with Vimium

[metmarkosaric]

thanks for reporting @mquandalle! this sounds more like a feature request rather than a bug. we keep the issues tab for actual bugs with our product only. feature requests we keep in this forum instead as there it's easier for our developer to have an overview and decide what to work on next

[mquandalle]

I was mentioning Vimium because that's what I am using, but it is actually an accessibility bug: the tabs are simple <li> elements without an appropriate aria-role to make them usable without a mouse. (Feel free to convert this issue into a discussion if you prefer to view this matter as a feature request)

[metmarkosaric]

cool, thanks for the explanation! we'll keep it as a bug in that case and our developers will hopefully be able to fix it. thanks again for reporting!

[djanda97]

Hello, I did a bit of research regarding how different HTML elements handle keyboard accessibility.

It is possible to add keyboard navigation to the existing li elements, but that would require adding the tabindex attribute, along with defining event handlers for the ENTER or SPACE keys to allow for the elements to be selectable.

From MDN, I discovered that button elements provide built-in keyboard accessibility features including:

• Ability to use the TAB key for navigating between buttons
• Ability to select buttons by pressing the ENTER or SPACE keys

Replacing the li elements with button elements seems like an enticing option considering the included accessibility features. I tested this locally on Firefox and it looks to be working fine, will be opening a PR soon and would like to get your feedback.

@mquandalle @metmarkosaric

[mquandalle]

Some focusable elements miss a visual indication that there are focused.

Using keyboard navigation we see an outline border on elements of the list but not “campagins” button. This element is still focused and pressing Enter opens it, but it should have a border when it is the focused element.

[mquandalle]

Also the top “user” menu is still not focusable.

[metmarkosaric]

thanks @mquandalle! i've reopened the thread so we can take a look