Changes to polite aria-live region are repeated too many times in Chrome and Firefox when title/label of control is changed

[alex-barstow]

Steps to reproduce:

1. Open this test page in Chrome
2. Click the button
3. Listen for repetitive announcements
4. Repeat 2 and 3 to toggle the button's state

Expected behavior:

The updated text should be announced ~1-2 times (2 would be understandable since the button click updates both thetitle attribute of the button element and the innerText of the child span element)

Actual behavior:

The updated text is repeated 6 times in Chrome (ex. "Text B, Text B, B, Text B, Text B, Text B") and 3 times in Firefox (ex. "Text A, Text A, Text A")

System configuration:

NVDA version: v2017.4

NVDA Installed or portable:
Installed

Windows version:
Windows 10 Pro Version 1709 Build 16299.192

Browser versions:
Chrome 63 and 64
Firefox 58

Other questions:

Does the issue still occur after restarting your PC?
Yes

Have you tried any other versions of NVDA?

Yes, v2015.3 (same results, except there are 5 repetitions instead of 6 in Chrome)

[RichCaloggero]

Having same issue

This only occurs with React; does not occur using direct dom manipulation. See more explanation and tests here:

https://github.com/RichCaloggero/react-test

[RichCaloggero]

THere may be a fix for this

The following github repo contains a set of react components which seem to fix the repetition issue.

So far, only tested in Firefox.

URL: https://github.com/AlmeroSteyn/react-aria-live

[jcsteh]

@RichCaloggero: I think the issue you are experiencing is different to this one, even though it has the same symptoms. As discussed via email, yours relates to events being fired for each area of the text that changed, and there wouldn't be "repetition" if aria-atomic wasn't set.

In this test case, the three announcements occur as follows:

1. The button is focused and its name (as set by the title attribute) changes. Whether or not it's a live region, we would report the change in that case. While I understand this is a distilled test case, there's no good "real world" reason to make a focused button a live region, as its name will always be read when it is changed while it is focused.
2. The text of the button changes, so a text change event gets fired. NVDA's live region code reports the change.
3. The name of the button changes (see 1), so a name change event is fired. Because live regions can include graphics, etc. which have names (e.g. alt attribute) that aren't part of the "text", NVDA's live region code also handles name changes. Thus, the change gets reported.

Ideally, we shouldn't do 3) in this case.

@michaelDCurran, my understanding is that we report name changes for live regions because of alt text (#3329). Could we restrict this check so we only do this if the element in question has explicit-name: true? For that matter, should we also avoid retrieving text if explicit-name is true?

I'm not sure why there are even more repeats in Chrome, but this may possibly improve with #8043.

[RichCaloggero]

Fix with this component

Install react-aria-live from npm. See it's github page here:

https://github.com/AlmeroSteyn/react-aria-live

How it works

Basically, react changes the dom as efficiently as possible. This means, among other things, that if you have some text in a live region and you then update it (i.e. cause the component to update), react will not simply rewrite the entire thing with textContent or appendChild; it will change the actual text nodes. For instance, if you have this:

<div aria-live="polite" aria-atomic="true">
{message}
</div>

and you change message, then text text nodes inside the div will be updated, not removed and rewritten.

The browser will attempt to do this by changing character ranges. For instance if previous contents were "this is a test", and new contents are "this was a simple test", the browser would change three ranges and then fire three events which the accessibility API passes to the screen reader.

The fix then is to empty the container before writing new text to it, but only do this when the new text is different. A bit tricky in react without directly manipulating the dom; use two live regions and alternate between them.

Here is a very simple component that does this, but highly suggest using the react-aria-live component mentioned above as it covers more corner cases and is well written and documented.

class Status extends React.Component {
constructor (props) {
super (props);
this.state = {alternate: false};
} // constructor

static getDerivedStateFromProps(props, state) {
return {alternate: !state.alternate};
} // getDerivedStateFromProps

render () {
  const {alternate} = this.state;
  const {message, ..._props} = this.props;
  
  return (
  <div>
    <div {..._props}>
  {alternate? message : null}
  </div>
      <div {..._props}>
  {!alternate? message : null}
  </div>
  </div>
  );
} // render
}; // Status

[jcsteh]

@RichCaloggero commented on Aug 17, 2018, 4:29 AM GMT+10:

Fix with this component

Install react-aria-live from npm. See it's github page here:

@RichCaloggero, as I noted in #7996 (comment), the case you describe is a different case to the one described by the reporter (and thus the subject of this issue). I'd prefer we didn't conflate these two, as while they have the same symptoms, they have very different underlying causes. Thanks.

[Adriani90]

Small progress in Chrome 74 with NVDA 2019.1.1, the test is repeated only 4 times instead of 6 👍 :-)

[Yegorich555]

One more issue. If a child contains couple items and you change aria-hidden="true" to aria-hidden="false" it will announce twice! The issue exists with the following html structure:

<div tabindex='0' aria-live='polite>
    <div id='slide-1' aria-hidden="false">
       <img src='...' alt='Banner 1'/>
       <div>
           <p> Some text here</p>
           <p> and here</p>
       </div>
    <div>
   <div id='slide-2' aria-hidden="true">
       <img src='...' alt='Banner 2'/>
       <div>
           <p> Some text here</p>
           <p> and here etc.</p>
       </div>
    <div>
</div>

[Adriani90]

@Yegorich555 I guess the slide 2 is still visible although aria-hidden=true and this leads to the objects being repeated. Right? Usually aria-hidden=true is used together with display:none or visibility:hidden like in this example:
https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-hidden
Using only aria-hidden=true would suffice for screen readers which access information only through the DOM directly. But as far as I understand NVDA is not using only the DOM but also other accessibility platforms.

But I think @jcsteh could explain much better than me :-)

[Yegorich555]

@Adriani90 you are right. Slide 2 is still visible for a couple seconds, but aria-hidden='true' must fix twice-reading... One more detail: aria-relevant='text' fixes twice-reading but it doesn't work when we have 'div' with nested 'p'. So the following example works for me

<div tabindex='0' aria-live='polite' aria-relevant='text'>
    <div id='slide-1' aria-hidden="false">
       <img src='...' alt='Banner 1'/>
       <div class="visuallyhidden"> Some text here and here</div>
       <div aria-hidden="true">
           <p> Some text here</p>
           <p> and here</p>
       </div>
    <div>
   <div id='slide-2' aria-hidden="true">
       <img src='...' alt='Banner 2'/>
       <div class="visuallyhidden"> Some text here and here etc.</div>
       <div aria-hidden="true">
           <p> Some text here</p>
           <p> and here etc.</p>
       </div>
    <div>
</div>

[AleksandrHovhannisyan]

This is a bug even without React. Simple demo here: https://gui-challenges.web.app/theme-switch/dist/. The button uses aria-live="polite", but changes are narrated three times in succession.

[RichCaloggero]

1. I hear the announcement exactly twice with Firefox and latest NVDA (2021.3.1)
2. my suspician is that when the label changes, the live region triggers and new text is read, but because the button also has focus it is re-read
   This case should never arrise; why would you put live region marup on a button? If you want to communicate the state of a button, make it a toggle button, or simply change the label as you are doing and NVDA will read the new one (i.e. drop the live region markup and the announcement will only happen once).