[wp-trac] [WordPress Trac] #33060: Screen readers: moving focus and animations (the Publish box)

[WordPress Trac]

#33060: Screen readers: moving focus and animations (the Publish box)
---------------------------------------+-----------------------------
 Reporter:  afercia                    |      Owner:
     Type:  defect (bug)               |     Status:  new
 Priority:  normal                     |  Milestone:  Awaiting Review
Component:  Administration             |    Version:  4.2
 Severity:  normal                     |   Keywords:
  Focuses:  accessibility, javascript  |
---------------------------------------+-----------------------------
 Noticed for the first time during Press This development in the 4.2
 release cycle and reproduced in other places too, for example in the
 Customizer, in the Media Views and in the Post Publish box.

 Will use the Publish box as an example, since it's easier to understand,
 and as scope of this ticket.

 Testing with Firefox + NVDA, here's what happens when clicking the Edit
 link to change the post publish date: since focus is moved '''during'''
 the animation NVDA gets lost for some milliseconds and starts reading out
 the document from the start, announcing the document title multiple times,
 together with a very explanatory "unknown". A lot of noise for users :)

 In the screenshot below, in the NVDA speech viewer the first highlighted
 box is when focus is on the "Edit" link. After activating the link, all
 that stuff gets read out until NVDA finally understand focus is on a new
 element (the second highlighted box).

 [[Image(https://cldup.com/5lfUdh3sRt.png)]]

 With just a small change, moving the focus when the animation is complete
 makes a huge difference, see screenshot below:

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

 While browsers move focus immediately, turns out screen readers may not
 understand an element is getting visible until the animation is complete.

 Will submit a patch for the Publish box. I'd also strongly recommend to
 take into consideration this for all future developments: sliding panels,
 highly animated interfaces, Media Views getting updated, etc. they all
 should try to detect when animations or UI updates are complete and just
 then move the focus, when needed.

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