[wp-trac] [WordPress Trac] #58912: Mobile: Admin menu unexpectedly closes with Safari

[WordPress Trac]

#58912: Mobile: Admin menu unexpectedly closes with Safari
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:  (none)
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Administration                 |    Version:  6.2
 Severity:  normal                         |   Keywords:  has-screenshots
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 Turns out the change introduced in #53587 / [55326] makes the admin menu
 unusable with Safari.

 My testing environment:
 macOS 13.4.1
 Safari 16.5.2 (18615.2.9.11.10)
 VoiceOver 10 (869.24)

 To reproduce:
 - Emulate a smaller screen by using the 'Responsive Design Mode' in the
 Safari 'Develop' menu.
 - Go for example to the posts list page in the admin.
 - Click the hamburger icon at the top of the page to expand the admin
 menu.
 - Click, for example, the menu item: Users
 - Expected: the menu item to expand and reveal its sub-items.
 - Actual: the whole admin menu closes. Nothing else happens.
 - Click on a menu item that doesn't have any sub-item e.g.: Comments.
 - Expected: the browser to navigate to the Comments page.
 - Actual: nothing happens.

 Although this happens only with Safari, the inability to navigate through
 the admin pages seems to me a pretty serious issue.

 The implementation in #53587 / [55326] relies on detecting whether the
 clicked menu link has focus and is contained within the menu. Safari is
 known to _not_ set focus on clicked elements or at least, it _may_ decide
 to not set focus on some kind of elements.

 After some debugging,
 [https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/admin/common.js?rev=56243&marks=1712-1720#L1712
 at this point of the code]:

 With Chrome:

 {{{
 focusIsInToggle is false
 focusIsInSidebar is true
 $( ':focus' )[0] returns the clicked link
 document.activeElement returns the clicked link
 }}}

 With Safari:

 {{{
 focusIsInToggle is false
 focusIsInSidebar is false
 $( ':focus' )[0] returns undefined
 document.activeElement returns the body element
 }}}

 This confirm Safari doesn't set focus on the clicked link and the scripts
 fails.

 Worth noting #53587 was reopened at some point because a new ticket
 reported a similar problem with iOS Safari, see #54837. The bug seem nnot
 limited to mobile Safari though.

 See attached animated GIF to illustrate the unexpected collapsing of the
 menu.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58912>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform