Я создаю пользовательский веб -компонент, который отображает статистику устойчивости в прямом эфире для отелей. Обновления компонентов CO₂ сбережения в режиме реального времени, и я хочу, чтобы считыватели экрана объявили об обновлениях, используя живой регион Aria.class LiveStats extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
CO₂ Saved: 10kg
`;
}
updateCO2(newValue) {
const output = this.shadowRoot.getElementById("co2-output");
output.textContent = `CO₂ Saved: ${newValue}kg`;
}
}
customElements.define("live-stats", LiveStats);
Я ожидал, что вызов updateco2 (15) запустит объявление считывателя экрана для нового значения.output.textContent = "";
setTimeout(() => {
output.textContent = `CO₂ Saved: ${newValue}kg`;
}, 10);
< /code>
Но это не работает не надежно. На странице есть только один веб-компонент (Live-Stats) с простым счетчиком, который обновляется каждые 3 секунды. Текст «Обновления: 0» является заполнителем-он не представляет реальных данных. Страница не подключается к бэкэнд, API или внешней базе данных. Если кто -то может поиграть с этим, чтобы выяснить, почему некоторые читатели экрана борются с живыми обновлениями внутри Shadow Dom, потому что они не всегда обнаруживают изменения внутри инкапсулированного компонента. < /P>
Live Stats Web Component
class LiveStats extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
Updates: 0
`;
this.count = 0;
}
updateCount() {
const counter = this.shadowRoot.getElementById("counter");
// Force DOM mutation to trigger screen reader announcement
counter.textContent = '\u2060'; // Invisible character
setTimeout(() => {
counter.textContent = `Updates: ${++this.count}`;
}, 50);
}
}
customElements.define("live-stats", LiveStats);
// Instantiate the component and update every 3 seconds
const stats = document.querySelector("live-stats");
setInterval(() => stats.updateCount(), 3000);
Подробнее здесь: https://stackoverflow.com/questions/795 ... -a-web-com
