Missing keyboard accessibility of the Handbook Chapter menu

[rianrietveld]

Issues:

• At the moment the Chapter menu, added to the handbook pages misses keyboard functionality and screen reader feedback. The toggle to open the submenus is placed in a, empty<span> that doesn't get keyboard focus. The same style of menu is very well done in the Twenty Fifteen theme. I suggest implementing the structure/semantics as done there.
• There is no visible focus style. Suggest using the hover style also for the focus style.

[rianrietveld]

example chapter menu handbook

[rianrietveld]

Chapter menu handbook (the right image)

[rianrietveld]

First image was the wrong one, sorry for that

[Kau-Boy]

Unfortunately I couldn't test my patch locally, as the handbook has no content, so it would be nice, if someone else could test it.

The patch was implemented at the Contributor Days of WordCamp Brighton and WordCamp Zagreb.

[SergeyBiryukov]

In 5871:

Breathe: Make handbook Chapters menu accessible from keyboard, add screen reader feedback and visible focus style.

Props Kau-Boy.
Fixes #3048.

[rianrietveld]

Hey @Kau-Boy
I did some testing, and the keyboard a11y is perfect.

However I found one issue with the aria-expanded.
If you are on a sub menu page, like
​https://make.wordpress.org/accessibility/handbook/get-involved/
That sub menu is open (visible), but the get involved icon is an arrow down and the aria expanded is false, although this menu item is open.

[SergeyBiryukov]

Additionally, clicking the arrow should trigger aria-expanded="true" on the button, not on the list item.

[SergeyBiryukov]

In 5875:

Breathe: Properly set the .active class and aria-expanded attribute for the current menu item in handbook Chapters menu.

Fixes #3048.

[Kau-Boy]

Thanks @SergeyBiryukov! While I am still on my way back from WordCamp Zagreb, you are fixing my issue. That's how I like my community ;)