[wp-trac] [WordPress Trac] #36289: WP Speak assertive message and Firefox + NVDA bug

[WordPress Trac]

#36289: WP Speak assertive message and Firefox + NVDA bug
---------------------------------------+-----------------------------
 Reporter:  afercia                    |      Owner:
     Type:  defect (bug)               |     Status:  new
 Priority:  normal                     |  Milestone:  Awaiting Review
Component:  Administration             |    Version:
 Severity:  normal                     |   Keywords:
  Focuses:  accessibility, javascript  |
---------------------------------------+-----------------------------
 Looks like Firefox and NVDA have a weird behavior with the assertive live
 region used for `wp.a11y.speak()`. To make things more clear, I've
 prepared a short video:

 https://cloudup.com/cxI6TBs0xaa

 Video direct link if you can't see it in the player:
 https://cldup.com/GcWiYceo7x.mp4

 In the video, I'm just opening two "popup" modal dialogs used in
 WordPress. When the modal dialogs open, NVDA announces "Alert" and stops.
 Worth reminding `wp.a11y.speak()` uses two live regions that are injected
 in the DOM, the second one has an ARIA `role="alert"` and an `aria-
 live="assertive"` ARIA property. Worth also noting:
 - seems it happens only with Firefox + NVDA
 - tested with Internet Explorer 11 and NVDA and couldn't reproduce
 - tested with Internet Explorer 11 and JAWS and couldn't reproduce

 The good news: IMHO this is not a WordPress bug. As far as I know, the
 specification says that `role=alert` should be processed like an assertive
 live region, that means screen readers should monitor changes in the
 content of the live region. No content change happens here, so nothing
 should be announced.

 The bad news: looks like screen reader support for live regions is
 inconsistent.

 Turns out the CSS `overflow: hidden` set on the body when opening modal
 dialogs (and also in the Customizer) triggers this behavior. My only guess
 is that Firefox rebuilds something in the accessibility tree when the body
 gets an overflow other than "visible" and NVDA announces the live region
 even if there's no change in the content.

 It would be great to hear the experts thoughts and recommendations, will
 try to ask around. Also, prepared two tests on Codepen, the first one
 tries to reproduce what happens in WordPress:
 http://s.codepen.io/afercia/debug/mPRKLa

 the second one is a very simplified case, all that it does is toggling
 overflow with different values on the body and also on a DIV that contains
 an assertive live region:
 http://s.codepen.io/afercia/debug/zqZyKe

 Would be great to find a workaround to improve the users experience, even
 if maybe this is something that should be reported upstream. I'd like to
 collect some feedback and then perhaps open a ticket upstream.
 Any thoughts more than welcome :)

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