To Traverse up the DOM to check if any ancestor has aria-hidden="true" and Traverse up the DOM to check if any ancestor previously had aria-hidden,
I added this to js file in the theme
document.addEventListener('focusin', function(event) {
let element = event.target;
while (element) {
if (element.hasAttribute('aria-hidden') && element.getAttribute('aria-hidden') === 'true') {
console.warn('Removing aria-hidden from ancestor of focused element to prevent accessibility issues.', element);
// Temporarily remove aria-hidden
element.setAttribute('data-aria-hidden-temp', 'true');
element.removeAttribute('aria-hidden');
}
element = element.parentElement;
}
});
document.addEventListener('focusout', function(event) {
let element = event.target;
while (element) {
if (element.hasAttribute('data-aria-hidden-temp')) {
console.warn('Restoring aria-hidden to ancestor after focus out.', element);
element.setAttribute('aria-hidden', 'true');
element.removeAttribute('data-aria-hidden-temp');
}
element = element.parentElement;
}
});