bulma
bulma copied to clipboard
Accessibility - not possible to tab into navbar dropdown
This is about Bulma | the Docs.
Overview of the problem
This is about the Bulma CSS framework
I'm using Bulma version 0.9.4 My browser is: Chrome
I am sure this issue is not a duplicate?
Description
It is not possible to tab into navbar dropdown.
Steps to Reproduce
Expected behavior
User should be able to use their tab key to open the navbar dropdown.
Actual behavior
It's not possible to open the navbar dropdown via a keyboard.
Important HTML elements need to have their tabindex attribute specified which will allow you to tab into each one sequentially. Without tabindex the browser may auto-detect tabbable-elements, but it will be inconsistent from browser to browser or may not work at all especially depending on the complexity of the page's HTML, CSS, JavaScript, IFRAMES, etc.
More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex and https://www.w3schools.com/tags/att_global_tabindex.asp
Here's two examples of navbars with dropdowns with and without the tabindex attribute specified and works as expected (at least on macOS Safari and Google Chrome)
https://codepen.io/dogtoe/pen/eYQQMZN
<div class="navbar-item has-dropdown is-hoverable" tabindex="1">
Also know that each navbar-item inside that the dropdown will also need their own tabindex attribute to allow you to tab into each one and the above example I also added tabindex="2"
through tabindex="5"
to allow for that.