Twenty Twenty: with horizontal menu, submenu should be dismissible

[lcarevic]

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

[rcreators]

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

[rcreators]

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.

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

[rcreators]

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

[joedolson]

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.

[poena]

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.

[joedolson]

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.

[rcreators]

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.

[joedolson]

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.

[karmatosed]

My recommendation would be to move this to close due to the reversing. I am going to gently propose this with the keyword but we can always revisit. I would love to have feedback from @poena and others that might counter this.

[joedolson]

@karmatosed I'm not following your reasoning for closing this ticket. The reverse tabbing is not a change we should make in this ticket, but that doesn't have any relationship to the need to be able to close submenus using the esc key. My argument is that we should limit the scope of the patch to the reported issue, and not make other unneeded interface changes at the same time.

[karmatosed]

Apologies @joedolson I misunderstood. Thank you for course correcting. This is another good reason we have that keyword and let things sit for a bit, so this can be checked, thanks for doing that.

[rcreators]

@joedolson and @poena Reverse Tabbing to the sub-menu is amended and working fine with the rest of the functionality. Please test and confirm. It is ready to commit.

[joedolson]

Requested changes on the PR.

[sabernhardt]

Moving to 6.7 for more change(s) and testing

[poena]

Is anyone able to clarify what changes are still requested? So that this can be addressed.

[joedolson]

The changes requested are fairly clearly laid out in the PR; are you asking me to repeat them here, @poena?

See: ​https://github.com/WordPress/wordpress-develop/pull/6150

[poena]

@joedolson No, I did not see the comments since they are not copied from GitHub to Trac, explaining where the requests are is enough.

[chaion07]

Thanks @lcarevic for reporting this. We reviewed this Ticket during a recent bug-scrub session. Here's a summary of the feedback received:

1. There is a new commit on PR that marks the requested changes as outdated
2. Considering the possibility of moving this Ticket to the next milestone in case it doesn't get closed

Thank you.

Props to @pratiklondhe for these suggestions.

Cheers!

[stoyangeorgiev]

This ticket was discussed at a bug-scrub session. With Beta 3 in just a few hours, will move this one to 6.8. Some refreshment of the PR may be needed.

[rcreators]

I have updated the lastest code in PR. There is still minor issue for closing on esc button for 3 tier menu.

[mehdi01]

Hi @lcarevic

Thanks for reporting this issue in detail! I’m also facing the same problem with submenu accessibility, particularly with dismissing it using the Esc key and the challenge of keyboard navigation.

I agree that implementing a dismiss function (like pressing Esc) and improving keyboard focus handling would enhance compliance with WCAG SC 1.4.13. The example you shared is helpful!

Looking forward to an update on this. Let me know if I can assist with testing.

Best,
Md Mahdi Hasan

[mohonchandra]

Hi @lcarevic

Thank you for laying this out! I am also encountering the same problem with accessibility of submenu--i.e., canceling it using the Esc key and improving keyboard navigation.

I absolutely agree that adding an option to dismiss (like Esc) and improving keyboard control for focus would better meet WCAG SC 1.4.13. Your given example is simply excellent!

Thanks for the improvements. Let me know if there is something that can help with testing.

[najmulsaju]

Hi, @lcarevic.

I have similar challenges when it comes to accessing the submenu, especially when attempting to dismiss it using the ESC key or keyboard navigation.

I would like to confirm what you have mentioned. Improving the focus management as well as allowing the use of ESC to dismiss the focus is indeed an enhancement to WCAG SC 1.4.13 compliance. Thank you for providing that example.

Looking into your examples to assist you if your analysis requires testing.

Thanks

[audrasjb]

@joedolson is this ticket still on your plate for 6.8? Should we move it to 6.9?
I'm keeping it open one more week for now, but we're approaching the end of the beta cycle :)

[saurabh.dhariwal]

Issue Summary

Problem: Before applying the patch, when a sub-menu was opened, it did not close when the "Esc" key was pressed.
Expected Behavior: Pressing the "Esc" key should close the open sub-menu.

Testing Steps & Results

Open the application and navigate to the relevant section. ✅
Click to open the sub-menu. ✅
Press the "Esc" key. ✅
Verify if the sub-menu closes. ✅

Result: After applying the patch, the sub-menu successfully closes when the "Esc" key is pressed.
Attachments

Screenshot(s) attached for reference.
Before Patch Screenshot : ​https://prnt.sc/zbDmle4BfTV6
After Patch Screenshot : ​https://prnt.sc/gyCxh3RoFOhV

Test Conclusion

Status: ✅ Passed
Remarks: The patch successfully resolves the issue. The functionality now works as expected.

[joedolson]

@saurabhdhariwal Thanks for your test! However, this is not yet meeting the needed standards. There are issues with moving focus after the menu is closed that are still an issue.

This is an alternate version derived from ​https://github.com/WordPress/wordpress-develop/pull/6150. It simplifies the code, and also fixes some issues with focus management.

One key change is that it disables the dropdowns temporarily if you escape out of the last menu (so that tabbing forward doesn't immediately move you back into the menu you just left).

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

[joedolson]

I've updated this with a heavily revised PR that improves the focus handling and predictability of behavior. To be thorough, this should be tested with a fairly deeply nested menu. I tested with a depth of three sub-menus, each with two items.

1) Tab through to open all sub menus.
2) From each sub menu, hit esc.
3) The esc key will move focus to the parent item that contains the current menu. Since focus on that location triggers the sub menu, this does not close the current menu, but will close any menu that is a child of the current menu.
4) When closing the last submenu, focus is moved to the main menu item, and the 'closed' class is assigned to the list item, to prevent the menu from re-opening on the next tab press.
5) Press tab to navigate to the next main menu item.
6) Press shift + tab to navigate backwards, which should land you in the last item of the last sub-menu for the previous parent.

[pratiklondhe]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8529.diff

Environment

• WordPress: 6.8-beta2-20250318.104812
• PHP: 8.1.29
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.1.29)
• Browser: Firefox 136.0
• OS: macOS
• Theme: Twenty Twenty 2.8
• MU Plugins: None activated
• Plugins:
  • Query Monitor 3.17.2
  • Test Reports 1.2.0

Actual Results

1. ✅ Pressing esc moves the focus to parent menu and closes all child menus
2. ✅ tab can be used to move to next menu/menu item
3. ✅ Pressing shift + tab opens the last item of the last sub menu of the previous parent

Supplemental Artifacts

Attached video of the testing

[ugyensupport]

Twenty Twenty: with horizontal menu, submenu should be dismissible

Description

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.

Patch tested

: ​https://github.com/WordPress/wordpress-develop/pull/8529/files

Steps

1) Tab through to open all sub menus.
2) From each sub menu, hit esc.
3) The esc key will move focus to the parent item that contains the current menu. Since focus on that location triggers the sub menu, this does not close the current menu, but will close any menu that is a child of the current menu.
4) When closing the last submenu, focus is moved to the main menu item, and the 'closed' class is assigned to the list item, to prevent the menu from re-opening on the next tab press.
5) Press tab to navigate to the next main menu item.
6) Press shift + tab to navigate backwards, which should land you in the last item of the last sub-menu for the previous parent.

Environment

• WordPress: 6.7.3-alpha-59977
• PHP: 8.4.1
• Server: Apache/2.4.62 (Unix) mod_wsgi/5.0.1 Python/3.12 mod_fastcgi/mod_fastcgi-SNAP-0910052141 OpenSSL/1.1.1w
• Database: mysqli (Server: 5.7.44 / Client: mysqlnd 8.4.1)
• Browser: Chrome 134.0.0.0
• OS: macOS
• Theme: Twenty Twenty 2.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WordPress Beta Tester 3.6.2
  • WP File Manager 8.0.1

Actual Results

✅ Pressing esc moves the focus to parent menu and closes all child menus
✅ tab can be used to move to next menu/menu item
✅ Pressing shift + tab opens the last item of the last sub menu of the previous parent
✅ Patch works

Supplemental Artifacts

​https://files.fm/u/u3twpe3gqc

[shailu25]

Test Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/8529

Environment

OS: Windows
PHP: 7.4.31
WordPress: 6.8-beta2-20250317.225605
Browser: Chrome
Theme: Twenty Twenty
Plugins: None activated

Actual Results

• ✅ Issue Resolved With Patch. (The Sub menu can now be closed by pressing the Esc key.)

Screencast

• ​https://drive.google.com/file/d/1eutSCJneqMQbFpGg4E7eWrTsCjkNrs_z/view

[joedolson]

In 60040:

Bundled Themes: A11y: Dismiss submenus with esc in Twenty Twenty.

Allow submenus in Twenty Twenty to be dismissed using the esc key to meet WCAG 1.4.13. Set focus to previous submenu parent on esc, and ensure that after escaping the last submenu, tab moves to the next parent item, not back into the submenu.

Props lcarevic, rcreators, pratiklondhe, poena, karmatosed, chaion07, audrasjb, mehdi01, mohonchandra, najmulsaju, saurabhdhariwal, ugyensupport, shailu25.
Fixes #49950.

[kawsar007]

Thanks for detailing this issue! I’m facing the same submenu accessibility problem, especially with Esc key dismissal and keyboard navigation. Implementing a dismiss function and improving focus handling would enhance WCAG compliance. Your example is helpful! Let me know if I can help with testing.