- Issue created by @emptyvoid
- 🇨🇦Canada bisonbleu
I was able to replicate this issue (the inability to tab-navigate into all accordion panels) on SimplyTest.me.
In the accordion-header DIV of the View's first row, the tabindex attribute is set to "0", all good there. But in all subsequent rows, the tabindex attribute is set to "-1" which means «skip me». I'm not sure if this is actually breaking any WCAG Success Criteria. But if your building e.g. an FAQ it means that screen readers can only access the content of the first row, and that can't be good.
Here is the markup of the first 2 rows from my SimplyTest.me test.
<div class="views-field views-field-title views-accordion-header js-views-accordion-header-b48545e8892d71b4866101dbab4e3da07639644ea873168c86806264a7efe552 ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0"> <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span> <span class="field-content">Article #3</span> </div> <div style="height: 85.8px;" class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false"> <div class="views-field views-field-body"> <div class="field-content"> <p>Body for Article #3</p> </div> </div> </div> <div class="views-field views-field-title views-accordion-header js-views-accordion-header-b48545e8892d71b4866101dbab4e3da07639644ea873168c86806264a7efe552 ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"> <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> <span class="field-content">Article #2</span> </div> <div style="display: none; height: 85.8px;" class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true"> <div class="views-field views-field-body"> <div class="field-content"> <p>Body for Article #2</p> </div> </div> </div>
- 🇨🇦Canada mgifford Ottawa, Ontario
Just adding a reference for this:
https://web.dev/articles/control-focus-with-tabindex#remove_an_element_f...It is easy enough to test for everyone with a keyboard.
- Status changed to Closed: works as designed
9 months ago 8:44pm 26 February 2024 - 🇨🇦Canada bisonbleu
Nothing wrong with views_accordion, works as designed.
Found useful info which explains how to interact with a website: How to browse websites using a keyboard only