Estoy tratando de alternar una etiqueta aria entre verdadero y falso cuando se hace clic en un botón. He probado varias implementaciones que parecen no hacer absolutamente nada. A continuación se muestra lo que estoy usando actualmente que alterna con éxito la clase. ¿Cómo puedo extender esto para alternar el valor expandido de aria entre verdadero y falso? Sé amable conmigo, estoy haciendo la transición de jQuery a ES6.
const theTrigger = document.getElementById('mobile-form-control'); const theForm = document.querySelectorAll('.l-header__mobile-form'); theTrigger.onclick = function () { for (const x of theForm) { x.classList.toggle('show'); } };Suponiendo que x en su ciclo for es el elemento en el que desea alternar el atributo aria-expanded :
theTrigger.onclick = function () { for (const x of theForm) { x.classList.toggle('show'); x.setAttribute( 'aria-expanded', x.getAttribute('aria-expanded') === 'true' ? 'false' : 'true' ); } };Sería mucho más fácil con un simple cambio:
x.ariaExpanded = !x.ariaExpanded;Pero extrañamente, ¡Firefox no admite el acceso booleano directo a la propiedad DOM! 🤯 https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded#browser_compatibility
Así que terminé con algo como esto:
x.setAttribute( 'aria-expanded', `${!(x.getAttribute('aria-expanded') === 'true')}` );