TAB key focus issue
-
It seems that a ACF / Frontend Admin update to support accessibilty features has broken my form.
I’m not sure which one of the two has added it, but here is what happened:
My form has accordion sections with input fields within them. Filling in the form was easy and fast using the TAB key to jump from one input field to the next.Now, however, TAB’ing jumps to the accordion headers too. Annoying!
Here is an example of how it was:
<div class="acf-label acf-accordion-title">
<i class="acf-accordion-icon dashicons dashicons-arrow-down"></i>
<label for="acff-post-field_680788d1ec8ea">My Label</label>
</div>Now it is like this:
<div class="acf-label acf-accordion-title" tabindex="0" role="button" aria-expanded="true">
<i class="acf-accordion-icon dashicons dashicons-arrow-down"></i>
<label for="acff-post-field_680788d1ec8ea">My Label</label>
</div>So with the help of my friend ChatGPT, who said:
✅ The accessibility intent is good
❌ The implementation hurts normal keyboard form navigation
❌ Accordion headers should usually be skipped during field tabbing,
I added some JS to skip TAB’ing to accordions:document.addEventListener('DOMContentLoaded', function () {
document
.querySelectorAll('.acf-accordion-title[tabindex]')
.forEach(el => {
el.setAttribute('tabindex', '-1');
});
});Not sure if this is fixable at all and suggestions to fix it properly from within ACF and/or Frontend Admin are welcome.
You must be logged in to reply to this topic.