#javascript #accessibility #wai-aria
Вопрос:
Я пытаюсь переключить тег aria между true и false при нажатии кнопки. Я перепробовал несколько реализаций, которые, кажется, абсолютно ничего не делают. Ниже приведено то, что я в настоящее время использую, которое успешно переключает класс. Как я могу расширить это, чтобы переключать расширенное значение aria между true и false? Будьте со мной помягче, я перехожу с jQuery на 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'); } }; Комментарии:
1. Я вставил неправильный фрагмент кода :/ Я обновил свой вопрос.
2. Атрибуты ARIA ничем не отличаются от других атрибутов HTML и могут быть изменены с помощью setAttribute (), как рекомендуется @connexo.
3. В StackOverflow вам необходимо управлять жизненным циклом ваших вопросов. Это означает, что если вы получите ответы и они решат вашу проблему, выберите тот ответ, который отвечает на нее лучше всего. Если нет, прокомментируйте приведенные ответы и объясните, почему они не помогают вам решить вашу проблему.
Ответ №1:
Предполагая x , что в вашем цикле for есть элемент, который вы хотите включить 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' ); } };