navbar-burger should be implementable as a button

[timcosta]

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.4.3] My browser is: Chrome 59 I am sure this issue is not a duplicate

Description

Currently, navbar-burger is show in the docs as a div, and is styled appropriately when implemented as a div. Unfortunately, this presents a problem when it comes to accessibility. div elements are not inherently clickable, but can be made clickable by adding tabindex=0. This allows browsers (Chrome at least) to focus the div, but keyboard click events such as the enter key or space key do no trigger click events on divs. As such, the navbar-burger is not currently web accessible.

Steps to Reproduce

1. Implement Bulma navbar as described in docs
2. Use tab to navigate to burger
   • You can't
3. Add tabindex="0" to burger
4. Navigate to burger
   • Can focus
   • Hit space or enter
   • navbar-menu doesnt toggle
5. Change burger to button
   • Click works
   • Keypresses work
   • Styling is messy

Expected behavior

navbar-burger should be styled appropriately as a button, as navbar-burger is a toggle button that modifies the state of the current page, not an a that changes the URL or navigates you, and not a div that isnt focusable for accessibility.

Actual behavior

div isnt accessible, when implemented as a button the styling is off

[julianwachholz]

Using <a> kind of works, but you'll also have to use href="#". But the styling is still off as that will cause the burger menu to appear in your link color, but that's easily fixed:

a.navbar-burger {
  color: inherit;
}

Toggling then works with enter but not space when using a simple onClick event handler.

[jakejx]

Is there a reason the docs currently provide an example of using <a> without mentioning the need to overwrite the style? It caused me quite a bit of confusion.

[n12o]

I made an issue that uses ckeckbox with label for toggling functionality without need for any additional JavaScript and wonder if changing navbar-burger to checkbox with label would work better for accessibility. Would like to hear your input on this matter.

You can check it out the issue here : #2500

[andremiguelaa]

I agree, this should be a button.