Mobile: Admin menu: Click on content should hide the menu

[kaneva]

Steps to reproduce:

1. Use a mobile device
2. Go to the admin via the browser
3. Expand the admin menu
4. Click on the content on the right side
5. Observe admin menu does not hide

I expect the menu to hide when I click on the content. Additionally, I expect the content on the right half to be non interactive.

[kaneva]

The menu in question

[sabernhardt]

Hi @kaneva and thanks for the report!

We should also consider closing the admin menu on focus state within the content area (when using the Tab key with desktop browser zoom of 200% or more).

[sabernhardt]

focused element with menu expanded, at 200% zoom

Added a focusout event listener to #wp-admin-bar-menu-toggle and #adminmenumain.

Provided that $wpwrap.hasClass( 'wp-responsive-open' ), and neither of the above parents or their children contain the newly focused element, the sidebar will close.

N.B. While the sidebar is open, non-sidebar content doesn't respond to the first input attempt, negating any impact of accidental click or touch events.

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

[costdev]

#53587 - After patch

[costdev]

Replying to sabernhardt:

Hi @kaneva and thanks for the report!

We should also consider closing the admin menu on focus state within the content area (when using the Tab key with desktop browser zoom of 200% or more).

The submitted patch also closes the menu in this circumstance.

[costdev]

Pinging for advice from @joedolson, are you happy to progress this ticket or is there someone else you'd recommend I reach out to?

[joedolson]

I can still take a look; I hope to have some time in October.

[costdev]

Thanks @joedolson!

[audrasjb]

Reviewed during today's bug scrub.

The patch still applies cleanly against trunk.
In my testing it fixes the underlined issue. Probably a good commit candidate.

[joedolson]

In 51946:

Administration: Hide mobile menu on focusout.

Closes the admin menu on mobile devices when keyboard focus moves outside of the menu or menu toggle elements. Improves the usability of the menu on mobile by allowing closure anywhere outside the menu rather than only on the toggle.

Props kaneva, costdev, sabernhardt
Fixes #53587.

Committed via https://core.trac.wordpress.org/changeset/51946.

[hellofromTonya]

Reopening due to issue reported in #54837 in 5.9 RC. @joedolson reverting [51946] resolves the reported issue on mobile. Are you okay with reverting it and then moving this to 6.0 for further investigation?

[hellofromTonya]

​Spoke with @joedolson on slack who confirmed okay to revert [51946] and move resolution to 6.0.

I'll take care of the revert commit shortly.

[hellofromTonya]

Self-assigning for the revert to trunk and 5.9 branch.

[hellofromTonya]

In 52591:

Administration: Revert [51946].

Reverting changeset due to reported issue of menu being hidden after clicking on certain mobile devices.

Props dhusakovic, audrasjb, SergeyBiryukov, costdev, joedolson.
See #54837, #53587.

[hellofromTonya]

Marking for 2nd committer's review to revert [51946] in the 5.9 branch.

[audrasjb]

This changeset can be reverted in branch 5.9 as it currently fixes the underlined issue on trunk.

[hellofromTonya]

Awesome. Thank you @audrasjb. Will revert it shortly.

[hellofromTonya]

In 52592:

Administration: Revert [51946].

Reverting changeset due to reported issue of menu being hidden after clicking on certain mobile devices.

Props dhusakovic, audrasjb, SergeyBiryukov, costdev, joedolson.
Reverts [51946] on the 5.9 branch.
See #54837, #53587.

[hellofromTonya]

[51946] is now reverted on both trunk and 5.9 branches. Resetting keywords, moving to 6.0, and resetting ownership.

Reopening, since this was reverted prior to release.

[ryokuhi]

We reviewed the ticket today during the Accessibility Team's weekly bug scrub.
The patch in this ticket was committed and then reverted because of the hard-to-reproduce bug reported in #54837.
I'm reporting here the testing instructions from the above ticket: if, after applying the patch, someone is able to reproduce the bug and give extra information, please add a comment below.

1. Use a mobile device (tested with iPhone)
2. Login to admin via browser (tested with Safari and Chrome)
3. Expand the admin menu
4. Click on one of the main items (Posts, Users, etc)
5. Admin menu is hidden
6. Open menu again
7. Item clicked has been expanded showing subitems.

[audrasjb]

As per today's bug scrub: the above issue still need to be reproduced.
It looks like it was produced using iOS with iPhone 11 or 12.

[audrasjb]

Alright, I tested the pull request on iOS (iPhone 11) and the menu closes when I click in the content, but I found another bug and I not sure if it is related to the changeset or not: when you try to open a menu which contains a submenu, the admin menu closes itself, and you have to reopen it to click on the sub item.

Maybe it's related to this change, maybe not, but worth fixing this behavior :)

[joedolson]

@audrasjb That is the issue reported against this change: see #54837, which was the reason this was reverted. So that's a confirmation that the issue still exists and still needs to be addressed. Somebody with an iPhone 11 will probably have to work on this, since I couldn't reproduce using emulation.

[joedolson]

Moving to 6.2.

[sabernhardt]

The patch relies on the wp-responsive-open class, but that is not always accurate. At least when resizing the window—or switching a phone's orientation between vertical and horizontal—the script does not update the wp-responsive-open class (or the aria-expanded attribute).

This may or may not relate to the reported iPhone issue.

[ryokuhi]

I made a few tests today using an iPhone with iOS 15: I was able to reproduce both the original issue (when tapping outside of the admin menu, the menu doesn't close), and the issue that caused the revert (after the patch is applied, if you tap on one of the main menu items, the admin menu closes).

In case someone is able to fix the issue and needs testing, I should be able to provide it, possibily in time for 6.2 Beta 1 release.

[joedolson]

Fixes iOS issue

[joedolson]

All right; using the information from @ryokuhi and managing to set up a test case on iOS, I've got a fix for the issue.

The problem was that on iOS, the submenu trigger was causing a loss of focus; by monitoring document.activeElement, I could see that the activeElement shifted to the body when submenus were toggled. This caused focusIsInToggle and focusIsInSidebar to return true.

Resolved this by triggering focus on the submenu trigger after toggling.

In addition, I added an escape on ! document.hasFocus() so that the menu wouldn't close if the user switches focus to another tab, window, or application.

[sabernhardt]

The jsvalidate:build stage complained about a comma in the console.log line, though you may have intended to remove the full line anyway.

I was nervous about using the wp-responsive-open class, but I did not notice any problems when resizing the window around the breakpoint in Firefox.

[joedolson]

Remove console.log

[joedolson]

Thanks for noting that, @sabernhardt.

It didn't seem to me that the wp-responsive-open class dependency was significant; I couldn't find any reason for it to cause a problem.

I think we should commit this and move it forward. If there are additional issues, they should be spotted in beta.

Close admin nav menu when focus moves into the body.

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

[joedolson]

I've tested in iOS and confirmed that prior to this change the menu closed when activating a menu item with children, and after the change the menu only closes when focus is moved to body.

Marking to commit based on prior approval, passing tests, and tests on iOS.

[joedolson]

In 55326:

Administration: Close admin menu when focus moves to body.

User should not have to reach the admin menu toggle in order to close the menu. This can be a problem for one-handed mobile use, users with small hands, and numerous other situational usages.

Close the admin menu when focus moves anywhere other than the menu or the menu toggle and the current document is active.

Props kaneva, sabernhardt, costdev, ryokuhi, hellofromtonya, dhusakovic, thelovekesh, joedolson.
Fixes #53587.

[joedolson]

In 55327:

Administration: Fix JavaScript test failure.

Remove unused variable e that I removed from Github, but failed to remove before committing. Follow up to [55326].

Unprops joedolson.
Fixes #53587.

Closed with https://core.trac.wordpress.org/changeset/55326

Closed in https://core.trac.wordpress.org/changeset/55326