Within my react application, I am noticing an issue in NVDA where my addition inside an aria-live element is being read out multiple times. I only notice this issue within react, and cannot reproduce it in plain JavaScript.
I broke down my code into the smallest reproducible item. With NVDA 2018.1 in the Firefox 59.0.3, you can see NVDA reads out the change 6 times, one per variable.
https://codesandbox.io/s/lx8jykqprz
When you press go, the expected behavior is that it should read the new counters out once. However, it is read out 6 times. If you change around the number of ${this.state.counter} variables, you will see the number of times it is read out is changed.
Has anyone else encountered this issue? If so, how did you work around it?
==============
Edit: As I stated in my comment under the accepted answer:
What I noticed is that in my example, react was rendering 6 text nodes, one for each counter variable. This, in combination with the aria-atomic tag, was forcing the variables to be read multiple times.
By changing it to ${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter} this fixed the issue as it rendered down to a single text node, and therefore the change was only read out once.
You are using aria-atomic=true which says to read the entire block anytime anything changes. The default value is false so it only reads just the text that changed. When I run your example with false, it works ok. When I run your original code on Internet Explorer, it works ok. When I run your original on chrome (aria-atomic=true), it gets worse. When viewing the speech viewer, here's what I see (and hear) on chrome:
000000
000000
100000
100000
100000
110000
110000
110000
111000
111000
111000
111100
111100
111100
111110
111110
111110
111111
That might give you a better idea of what's being updated and read. With live regions, the changes aren't merged together and announced once. Every change you make will be queued up to speak.
If I change aria-atomic to false on chrome, I hear:
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
In general, aria-live regions work pretty well. I'm pretty sure you're hearing exactly what is being updated.