WordPress.org

Making WordPress.org

Opened 6 weeks ago

Closed 3 weeks ago

Last modified 3 weeks ago

#3048 closed defect (fixed)

Missing keyboard accessibility of the Handbook Chapter menu

Reported by: rianrietveld Owned by: SergeyBiryukov
Milestone: Priority: normal
Component: Handbooks Keywords:
Cc:

Description

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.

Attachments (3)

chapter-menu-handbook.png (110.1 KB) - added by rianrietveld 6 weeks ago.
example chapter menu handbook
chapter-menu.png (23.8 KB) - added by rianrietveld 6 weeks ago.
Chapter menu handbook (the right image)
3048.diff (2.5 KB) - added by Kau-Boy 3 weeks ago.

Download all attachments as: .zip

Change History (16)

@rianrietveld
6 weeks ago

example chapter menu handbook

@rianrietveld
6 weeks ago

Chapter menu handbook (the right image)

#1 @rianrietveld
6 weeks ago

First image was the wrong one, sorry for that

This ticket was mentioned in Slack in #accessibility-docs by rianrietveld. View the logs.


6 weeks ago

This ticket was mentioned in Slack in #meta by sami.keijonen. View the logs.


5 weeks ago

This ticket was mentioned in Slack in #meta by kau-boy. View the logs.


3 weeks ago

#5 @Kau-Boy
3 weeks ago

  • Keywords has-patch needs-testing added

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.

@Kau-Boy
3 weeks ago

#6 @SergeyBiryukov
3 weeks ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 5871:

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

Props Kau-Boy.
Fixes #3048.

#7 @rianrietveld
3 weeks ago

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.

#8 @SergeyBiryukov
3 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#9 @SergeyBiryukov
3 weeks ago

  • Keywords needs-patch added; has-patch needs-testing removed

#10 @SergeyBiryukov
3 weeks ago

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

#11 @SergeyBiryukov
3 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 5875:

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

Fixes #3048.

#12 @SergeyBiryukov
3 weeks ago

  • Keywords needs-patch removed

#13 @Kau-Boy
3 weeks ago

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 ;)

Note: See TracTickets for help on using tickets.