При использовании React элемент aria-live читается несколько раз в NVDA

Question

В моем приложении реагирования я заметил проблему в NVDA, когда мое добавление внутри элемента aria-live считывается несколько раз.Я замечаю эту проблему только в рамках реакции и не могу воспроизвести ее на простом JavaScript.

Я разбил свой код на наименьший воспроизводимый элемент.С NVDA 2018.1 в Firefox 59.0.3 вы можете видеть, как NVDA считывает изменения 6 раз, по одному на переменную.

https://codesandbox.io/s/lx8jykqprz

Когда вы нажимаете кнопку go, ожидаемое поведение - считывание новых счетчиков один раз.Тем не менее, он считывается 6 раз.Если вы измените число переменных ${this.state.counter}, вы увидите, как изменяется количество раз, которое они считываются.

Кто-нибудь еще сталкивался с этой проблемой?Если да, то как вы обошли его?

==============

Редактировать : Как я уже говорил в своем комментариипод принятым ответом:

Что я заметил, так это то, что в моем примере рендеринг представлял 6 текстовых узлов, по одному для каждой переменной счетчика.Это, в сочетании с тегом aria-atomic, заставляло переменные считываться несколько раз.

При изменении значения на ${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter} это исправляло проблему, поскольку оно отображалось до одного текстового узла, и, следовательно,изменение было зачитано только один раз.

Answer 1

Вы используете aria-atomic=true, который говорит, что нужно читать весь блок каждый раз, когда что-то меняется. Значение по умолчанию false, поэтому он читает только текст, который изменился. Когда я запускаю ваш пример с false, он работает нормально. Когда я запускаю ваш оригинальный код в Internet Explorer, он работает нормально. Когда я запускаю ваш оригинал на Chrome (aria-atomic=true), становится хуже. При просмотре средства просмотра речи вот что я вижу (и слышу) в Chrome:

000000 
000000 
100000 
100000 
100000 
110000 
110000 
110000 
111000 
111000 
111000 
111100 
111100 
111100 
111110 
111110 
111110 
111111

Это может дать вам лучшее представление о том, что обновляется и читается. В живых регионах изменения не объединяются и объявляются один раз. Каждое внесенное вами изменение будет поставлено в очередь, чтобы говорить.

Если я изменю aria-atomic на false на Chrome, я слышу:

1
1 
1 
1
1 
1 
1
1 
1 
1
1 
1 
1
1 
1 
1
1 
1 

В общем, aria-live регионы работают довольно хорошо. Я уверен, что вы слышите именно то, что обновляется.