I am trying to toggle an aria tag between true and false when a button is clicked. I've tried several implementations which seems to do absolutely nothing. Below is what I am currently using which successfully toggles the class. How can I extend this to toggle the aria-expanded value between true and false? Be easy on me, I am transitioning from jQuery to 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');
}
};
Assuming x in your for-loop is the element you want to toggle the aria-expanded attribute on:
theTrigger.onclick = function () {
for (const x of theForm) {
x.classList.toggle('show');
x.setAttribute(
'aria-expanded',
x.getAttribute('aria-expanded') === 'true'
? 'false'
: 'true'
);
}
};
It would be much easier with a simple toggle:
x.ariaExpanded = !x.ariaExpanded;
But weirdly, Firefox doesn't support direct boolean access to the DOM property! 🤯 https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded#browser_compatibility
So I ended up with something like this:
x.setAttribute(
'aria-expanded',
`${!(x.getAttribute('aria-expanded') === 'true')}`
);