Make WordPress Core

Opened 4 years ago

Last modified 3 weeks ago

#49950 assigned defect (bug)

Twenty Twenty (1.2) Horizontal menu - Submenu

Reported by: lcarevic's profile lcarevic Owned by: joedolson's profile joedolson
Milestone: 6.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-testing has-patch
Focuses: accessibility, javascript Cc:

Description

Hi there!

I've tried adding a submenu in the horizontal menu but there is some issue regarding accessibility when I tested it.

It fails the Success Criterion 1.4.13 Content on Hover or Focus of WCAG : https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus

The submenu cannot be dismissed. If there are many links in the submenu, keyboard navigation is tedious since the person will have to tab all of the content of the submenu before reaching the next item of the menu.

Expected fix:

The submenu should be dismissable with the Esc key for example.

Here is a menu with a submenu that implements the SC 1.4.13 : https://www.eesc.europa.eu/

It's my first ticket, so I hope I'v done it properly.

Regards,

Luce

Attachments (2)

submenu-wp.png (19.3 KB) - added by lcarevic 4 years ago.
49950.patch (3.8 KB) - added by rcreators 6 weeks ago.
Updated CSS file and JS file code. Keyboard tabbing will open submenu and esc will close submenu as per accessibility standard.

Download all attachments as: .zip

Change History (11)

@lcarevic
4 years ago

#1 @SergeyBiryukov
4 years ago

  • Component changed from General to Bundled Theme

#2 @ianbelanger
4 years ago

  • Keywords needs-testing needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Version 5.4 deleted

@rcreators
6 weeks ago

Updated CSS file and JS file code. Keyboard tabbing will open submenu and esc will close submenu as per accessibility standard.

#3 @rcreators
6 weeks ago

  • Keywords has-patch added; needs-patch removed

Patch added. Need Testing. Style.css, Style-rtl.css and index.js files updated. Tabbing will open a sub-menu and the user can go through it. If the user presses the ESC key while the sub-menu is opened, it will close the submenu and the user can move to the next menu item.

This ticket was mentioned in Slack in #accessibility by rcreators. View the logs.


5 weeks ago

This ticket was mentioned in PR #6150 on WordPress/wordpress-develop by @rcreators.


5 weeks ago
#5

abbing will open a sub-menu and the user can go through it. If the user presses the ESC key while the sub-menu is opened, it will close the submenu and the user can move to the next menu item. Also updated index.js as per slack discussion to make parent a focus when closing sub menu with esc.

Trac ticket: https://core.trac.wordpress.org/ticket/49950

#6 @rcreators
5 weeks ago

@joedolson as discussed over Slack, updated the code and submitted PR.

#7 @joedolson
5 weeks ago

  • Milestone changed from Future Release to 6.6

Thanks, @rcreators! I think it's too late in the 6.5 cycle to add this in, but I'm going to slate it for 6.6, and plan on getting it in early.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


3 weeks ago

#9 @joedolson
3 weeks ago

  • Owner set to joedolson
  • Status changed from new to assigned
Note: See TracTickets for help on using tickets.