make focus behave like hover for the navigation.

[ahus1]

Using :focus-within for dropdown menu.

This is a improvement.

The navigation bar behaves with the keyboard (tab+focus) the same like when using the mouse. Before the change the dropdown didn't work with the keyboard, now it works.

Proposed solution

A dropdown menu will expand when using the keyboard (didn't expand before).
The highlighting on focus will work like on hovering

Tradeoffs

None that I can think of. No additional classes and coupling. No JavaScript necessary.

Testing Done

I've changed the sass file and tested it locally with the Bulma documentation. I can now tab trough the navigation. In Chrome there is a blue standard highlighting for the active menu item when I tab trough (standard browser behavior). The Menu items focused now appear with light grey background - same as hovering. When I reach the "More" menu item, is expands. I can also use shift-tab to move back through the menu.

Screenshot of test attached.

I've used the same changes on my personal homepage.

[ahus1]

This might remedy some accessibility issues regarding the menu - #53

[jgthms]

Nice one! Thanks.