Регион Aria-live не считывает обновления при удалении элемента в Chrome

Question

Когда вы динамически добавляете элемент в область арии, Chrome считывает все элементы в этом регионе, что замечательно.

Но когда вы удаляете элемент, Chrome не перечитываетсписок. Это проблема, когда вы используете регион для ошибок, например, когда пользователь исправил ошибку, список не перечитывается.

Пример здесь: https://codepen.io/mildrenben/pen/WNNzVzN?editors=1010

<div aria-live='assertive'>

</div>

<button id='add'>add</button>
<button id='remove'>remove</button>

const addBtn = document.querySelector('#add')
const removeBtn = document.querySelector('#remove')
const ariaLive = document.querySelector('div')


let tick = 0

addBtn.addEventListener('click', () => {
  let newElem = document.createElement('span')
  newElem.textContent = tick
  tick++
  console.log(ariaLive, newElem)
  ariaLive.appendChild(newElem)
})

removeBtn.addEventListener('click', () => {
  ariaLive.removeChild(ariaLive.lastChild)
})

Answer 1

Правильный метод должен состоять в том, чтобы использовать атрибут aria-relevant, однако поддержка браузера очень слабая и поэтому не надежна.

Обычно я не рекомендую совершать хакерские поступки, чтобы заставить браузер вести себя определенным образом, но если вам действительно нужно сделать отчет об удалении из живого региона, я бы предложил следующее:

1. Установите aria-atomic атрибут в вашем регионе в true. Это означает, что программа чтения с экрана будет читать все содержимое активной области каждый раз, когда содержимое добавляется (но не удаляется).
2. Когда вы удаляете элемент из активной области, добавьте еще один невидимый элемент, подождите несколькосотен миллисекунд, а затем удалите этот элемент.
3. Область реального времени должна сообщать все содержимое (за вычетом удаления) при нажатии кнопки удаления.

Пример скрипта здесь: https://jsfiddle.net/mug6vonf/3/

Answer 2

Вы также должны использовать относящиеся к арии :

Значения:

Список, разделенный пробелом, одного или нескольких из следующих значений:

• additions - вставка узлов в живую область;следует считать уместным.
• removals - удаление узлов;следует считать актуальными.
• text - изменения текстового содержимого существующих узлов;должно считаться релевантным.
• all эквивалентен добавлению удаляемого текста.

aria-relevant="additions text" - значение по умолчанию для живого региона.

Значение по умолчанию не включает removals, что вам, вероятно, нужно.