Necesito que el lector de pantalla lea "Se eliminaron todos los filtros" cuando se eliminen todos los elementos del filtro. La parte complicada es: cuando se elimina el componente de filtro activo, no hay otro elemento para mí para configurar aria-label en All filters are removed . Me preguntaba cómo obligar al lector de pantalla a leer algo en este caso.
El ejemplo HTML está aquí:
<div *ngIf="activeFilters.length > 0"> <div class="active-filters" attr.aria-label="{{'List of active filters'}}"> <h4 class="active-filters-headline">{{'Active filters'}}</h4> </div> </div> Cuando se eliminen todos los elementos de filtro, el componente active-filters no aparecerá. Porque activeFilters.length sería 0. Así que no estoy seguro de cómo poner aria-label en el elemento que no existe.
Aquí está el código mecanografiado que potencialmente podría introducir la lógica del lector de pantalla:
ngAfterViewChecked() { if (this.interaction && this.interactionDataDelivery) { this.interaction = this.interactionDataDelivery = false; if (this.activeFilters.length == 0) { //How do I set up the aria-label? } } }He hecho esto en el pasado creando un elemento con aria-live="assertive" , usando algunos trucos de CSS para ocultarlo excepto para los lectores de pantalla y luego configurando su innerHTML . Algo a lo largo de estas líneas:
const $message = document.createElement('span'); $message.classList.add('visuallyhidden'); // <-- Some method of making sure this element is only seen by screen readers $message.setAttribute('aria-live', 'assertive'); document.body.appendChild($message); const speak = function (message) { $message.innerHTML = ''; window.setTimeout(() => { $message.innerHTML = message; }, 100); }; También es posible que desee tomar algunas medidas para asegurarse de que las personas que usan lectores de pantalla no puedan navegar manualmente al elemento del mensaje de alerta, como borrar su contenido después del hecho o tal vez controlar su atributo aria-hidden .