Screen readers: moving focus and animations (the Publish box)

[afercia]

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

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

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.

[afercia]

Please notice the proposed patch here assumes patch https://core.trac.wordpress.org/attachment/ticket/33059/33059.2.patch to be already in.

The patch does two things:

• when opening the panels, move focus when the animation is complete
• moves focus back to the Edit links when clicking OK or Cancel

Many other things should be done for accessibility here, but they're out of the scope of this ticket, for example:

• moving back focus to the Edit links should be complete before the sliding up animation starts, there's no guarantee for this and I'm a bit reluctant to use setTimeout
• logically related inputs should be grouped in fieldset elements with a proper legend
• non-link links used as UI controls should be buttons
• some of these things should be done also for the Comment Status box in comment.php. will open a new ticket

[iseulde]

In 33352:

Publish box: move focus when the animation is done

Also move the focus back to 'edit' when saving changes.

Props afercia.
Fixes #33060.