bulma icon indicating copy to clipboard operation
bulma copied to clipboard

Accessibility - not possible to tab into navbar dropdown

Open Mikilll94 opened this issue 1 year ago • 1 comments

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.

Mikilll94 avatar Jun 13 '23 14:06 Mikilll94

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.

digitigradeit avatar Jul 29 '23 13:07 digitigradeit