3

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.

Taylor D
  • 78
  • 1
  • 6

1 Answers1

1

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Thanks, you got me on the right track. For what I am doing, I needed `aria-atomic` to be true. What I noticed is that in my example, react was rendering 6 text nodes, one for each counter variable. 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. – Taylor D May 14 '18 at 17:26
  • glad it helped. and i didn't mean to imply that `aria-atomic` shouldn't be used. it's very handy for situations such as `
    you have 10 minutes left
    ` where the 10 is updated and you want the entire sentence read and not just the '10'.     – slugolicious May 15 '18 at 18:50