Make WordPress Core

Opened 3 years ago

Closed 13 months ago

Last modified 13 months ago

#53587 closed defect (bug) (fixed)

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

Reported by: kaneva's profile kaneva Owned by: joedolson's profile joedolson
Milestone: 6.2 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-testing-info has-patch commit
Focuses: ui, accessibility, javascript, administration Cc:

Description

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.

Attachments (5)

Screenshot_2021-07-05-13-47-54-613_com.android.chrome.jpg (355.1 KB) - added by kaneva 3 years ago.
The menu in question
expanded-admin-menu-firefox-200-zoom.png (39.5 KB) - added by sabernhardt 3 years ago.
focused element with menu expanded, at 200% zoom
#53587 - Close sidebar on focusout.gif (2.1 MB) - added by costdev 3 years ago.
#53587 - After patch
53587.2.patch (1.4 KB) - added by joedolson 13 months ago.
Fixes iOS issue
53587.3.patch (1.3 KB) - added by joedolson 13 months ago.
Remove console.log

Change History (65)

#1 follow-up: @sabernhardt
3 years ago

  • Focuses ui accessibility javascript added

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).

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


3 years ago

@sabernhardt
3 years ago

focused element with menu expanded, at 200% zoom

#3 @joedolson
3 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.9

This ticket was mentioned in PR #1584 on WordPress/wordpress-develop by costdev.


3 years ago
#4

  • Keywords has-patch added; needs-patch removed

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

#5 in reply to: ↑ 1 @costdev
3 years ago

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.

#6 @costdev
2 years ago

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

#7 @joedolson
2 years ago

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

#8 @joedolson
2 years ago

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

#9 @costdev
2 years ago

Thanks @joedolson!

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


2 years ago

#11 @audrasjb
2 years ago

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.

#12 @joedolson
2 years ago

  • Keywords commit added
  • Milestone 5.9 deleted
  • Resolution set to invalid
  • Status changed from accepted to closed

#13 @joedolson
2 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

#14 @joedolson
2 years ago

  • Milestone set to 5.9

#15 @joedolson
2 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#17 @hellofromTonya
2 years ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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?

#18 @hellofromTonya
2 years ago

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.

#19 @hellofromTonya
2 years ago

  • Owner changed from joedolson to hellofromTonya
  • Status changed from reopened to reviewing

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

#20 @hellofromTonya
2 years ago

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.

#21 @hellofromTonya
2 years ago

  • Keywords dev-feedback commit added; has-patch removed

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

#22 @audrasjb
2 years ago

  • Keywords dev-reviewed fixed-major added; dev-feedback removed

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

#23 @hellofromTonya
2 years ago

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

#24 @hellofromTonya
2 years ago

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.

#25 @hellofromTonya
2 years ago

  • Keywords commit dev-reviewed fixed-major removed
  • Milestone changed from 5.9 to 6.0
  • Owner changed from hellofromTonya to joedolson

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

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


2 years ago

joedolson commented on PR #1584:


2 years ago
#27

Reopening, since this was reverted prior to release.

This ticket was mentioned in Slack in #core by chaion07. View the logs.


2 years ago

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


2 years ago

#30 @sabernhardt
23 months ago

  • Milestone changed from 6.0 to 6.1

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


20 months ago

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


20 months ago

#33 @ryokuhi
20 months ago

  • Keywords needs-refresh needs-testing added

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.

#34 @costdev
20 months ago

  • Keywords has-testing-info added

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


19 months ago

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


18 months ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


18 months ago

#38 @audrasjb
18 months ago

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.

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


18 months ago

#40 @audrasjb
18 months ago

  • Keywords needs-testing removed

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 :)

#41 @joedolson
18 months ago

@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.

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


18 months ago

#43 @joedolson
18 months ago

  • Milestone changed from 6.1 to 6.2

Moving to 6.2.

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


17 months ago

#45 @sabernhardt
17 months ago

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.

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


14 months ago

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


13 months ago

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


13 months ago

#49 @ryokuhi
13 months ago

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.

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


13 months ago

@joedolson
13 months ago

Fixes iOS issue

#51 @joedolson
13 months ago

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

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.

#52 @sabernhardt
13 months ago

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

Remove console.log

#53 @joedolson
13 months ago

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.

Last edited 13 months ago by joedolson (previous) (diff)

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


13 months ago
#54

Close admin nav menu when focus moves into the body.

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

#55 @joedolson
13 months ago

  • Keywords commit added; needs-testing removed

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.

#56 @joedolson
13 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#57 @joedolson
13 months ago

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.

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


13 months ago

Note: See TracTickets for help on using tickets.