Improving the accessibility of the themes

Just a quick suggestion and tip for improving the themes.

The Burger menu button has a html element of div. This requires that the div gets several attributes to fullfill the role of a button, like indexing for keyboard navigation (like it already has) and should have the role of “button”.

In addition, it requires ekstra javascript to listen for enter key and space key (currently not working in the theme)

Instead, my suggestion is to change the div to a button. Then everything works out of the box, without labels and extra javascript. The eventListenener “Click” on a button also works for focused state and enter or space key input, and the button is automatically indexed, making it focusable. And for screenreaders, it looks like a button.

The tradeoff? Two extra lines of css:

background: transparent;
border: none;

Thanks for your feedback, we’ll make this change, the menu icon should be focusable.