WordPress.org

Making WordPress.org

Opened 2 years ago

Closed 2 years ago

Last modified 2 years 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 2 years ago.
example chapter menu handbook
chapter-menu.png (23.8 KB) - added by rianrietveld 2 years ago.
Chapter menu handbook (the right image)
3048.diff (2.5 KB) - added by Kau-Boy 2 years ago.

Download all attachments as: .zip

Change History (16)

@rianrietveld
2 years ago

example chapter menu handbook

@rianrietveld
2 years ago

Chapter menu handbook (the right image)

#1 @rianrietveld
2 years ago

First image was the wrong one, sorry for that

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


2 years ago

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


2 years ago

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


2 years ago

#5 @Kau-Boy
2 years 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
2 years ago

#6 @SergeyBiryukov
2 years 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
2 years 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
2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#9 @SergeyBiryukov
2 years ago

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

#10 @SergeyBiryukov
2 years ago

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

#11 @SergeyBiryukov
2 years 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
2 years ago

  • Keywords needs-patch removed

#13 @Kau-Boy
2 years 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.