[wp-trac] [WordPress Trac] #33029: Dismissable admin notices focus loss

[WordPress Trac]

#33029: Dismissable admin notices focus loss
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Administration                 |    Version:  4.2
 Severity:  normal                         |   Keywords:  needs-patch
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 When activating the button to dismiss an admin notice, the currently
 focused element (the dismiss button itself) disappears hence there's a
 focus loss. This is more noticeable in some browsers (e.g. Chrome) while
 other browsers try to be smarter (e.g. Firefox) and keep focus in place.

 To reproduce, use Chrome and edit a post, then press the "Update" button
 and after page refresh a notice will appear. Using your keyboard, tab
 through the UI elements and focus the dismiss button. Press Enter.

 Now tab again and focus will be on the document root. See screenshot:

 [[Image(https://cldup.com/8RQDiHnFkX.png)]]

 Worth noting this is not specific to dismissable notices, it happens every
 time a focused element gets hidden or removed from the DOM. Every time
 this happens, users will lose context and will be forced to navigate
 through several elements just to find again the last place from where they
 left off.

 Since it's a general issue in the admin I initially thought to open a
 general ticket but then feared it would have been too broad. Decided to
 start with a small, understandable example to start the discussion and
 hopefully find a nice, simple, solution :)

 As a general rule, every time a focused element gets hidden or removed
 from the DOM, correctly handling the focus and restoring it in the most
 logical place should be a developer responsibility.
 An interesting reading would be what a blind person (and developer, and
 Mozillian) thinks about this specific issue:
 https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-
 dialogs/
 while the article focuses on modal dialogs, the part about focus loss is
 pretty relevant.

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