Make WordPress Core

Opened 4 years ago

Last modified 2 weeks ago

#49950 assigned defect (bug)

Twenty Twenty: with horizontal menu, submenu should be dismissible

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 3 months 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 (18)

@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
3 months ago

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

#3 @rcreators
3 months 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.


3 months ago

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


3 months 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
3 months ago

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

#7 @joedolson
3 months 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 months ago

#9 @joedolson
3 months ago

  • Owner set to joedolson
  • Status changed from new to assigned

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


7 weeks ago

#11 @sabernhardt
5 weeks ago

  • Summary changed from Twenty Twenty (1.2) Horizontal menu - Submenu to Twenty Twenty: with horizontal menu, submenu should be dismissible

#12 @poena
3 weeks ago

  • Keywords changes-requested needs-refresh added

Hi @rcreators
I tested PR 6150 using Chrome on macOS, and the update breaks the menu.


When I navigate to the menu using the tab key, the visible focus is on the first parent menu item, and the submenu shows.
Pressing tab again, I am expecting to be able to use the submenu, but the submenu is no longer visible, and I can't see where the focus is.


I can only use the escape key once to close a submenu.
When I navigate to the menu using the tab key, the visible focus is on the first parent menu item, and the submenu shows.
When I press escape, the submenu no longer shows.
If I tab forwards from there, the visible focus is on parent menu item two, and its submenu shows.
When I press escape, nothing happens.


If I navigate with they keyboard past the menu and navigate backwards with Shift + Tab, focus moves to the wrong element. It moves to the parent menu item, not the the last item in the submenu.

Last edited 3 weeks ago by poena (previous) (diff)

#13 @joedolson
2 weeks ago

I tested this as well, but I don't see quite the same experience as @poena

Pressing tab again, I am expecting to be able to use the submenu, but the submenu is no longer visible, and I can't see where the focus is.

1) I can't replicate this issue.

I can only use the escape key once to close a submenu.

2) I replicated this issue.

If I navigate with they keyboard past the menu and navigate backwards with Shift + Tab, focus moves to the wrong element. It moves to the parent menu item, not the the last item in the submenu.

3) In my opinion, this change is an improvement, since it allows the navigation of the menu to be sped up both forward and backwards. However, if it's not a necessary change, it could be eliminated. I'm not sure the toggling of visibility is actually necessary to this change.

I also found an additional issue - the menu no longer closes when the link loses focus by means *other* than a keypress. E.g., if you tab onto the parent menu then click on the page, the menu stays open. A loss of focus by click should also be considered intent to close the menu.

#14 @rcreators
2 weeks ago

  • Keywords changes-requested needs-refresh removed

Hello @joedolson and @poena,

So I found the issue that @poena talked about. It happens when there is a multi-level sub-menu. I adjusted the code to make it work in that situation as well.

Apart from that, if you move back with the shift + Tab, as the sub-menu is already out of focus, it will focus on the parent menu item and then you can move to the sub-menu item with tabbing. Let me know if you want to change that function. It can be just updated with visibility CSS.

I also added a focusout event for the menu. So if the user clicks or does any event outside of the menu, the sub-menu will close down as well.

Please test this out and let me know if any further changes are required.

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


2 weeks ago

#16 @joedolson
2 weeks ago

Even though I actually think it's an improvement, I actually am inclined to think that we should not have reverse tabbing skip the submenus. On older core themes, we generally try only to fix bugs, and not actually make changes to behavior beyond that, which this would be.

@poena, if you have an opinion on this, let us know.

Note: See TracTickets for help on using tickets.