role="tablist" role="tab" role="tabpanel" errors

[Robanna777]

Below is a sample HTML from a Beaver Builder Accordion that I keep getting an error:
Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.

It seems like 'tablist' has a descendant of 'tab', and tab has a descendant of 'tabpanel'. On older versions of Lighthouse, I do not get the error, but I do on 10.1.1. Is this bug in Lighthouse, or does the code need help? Do the tabs need to be children, or is grandchild acceptable?

I'm new to all of this, so any help is great appreciated. Thank you,

<div multiselectable="true" class="fl-accordion fl-accordion-small" role="tablist">
<div class="fl-accordion-item fl-accordion-item-active" id="accordion-0">
<div class="fl-accordion-button" id="fl-accordion-kago2701m894-tab-0" aria-selected="false" aria-controls="fl-accordion-kago2701m894-panel-0" aria-expanded="true" role="tab" tabindex="0">
<a href="#" role="button" id="fl-accordion-kago2701m894-label-0" class="fl-accordion-button-label" tabindex="0" aria-controls="fl-accordion-kago2701m894-panel-0">Item 1</a>
<a href="#" role="button" id="fl-accordion-kago2701m894-icon-0" class="fl-accordion-button-icon fa-minus" tabindex="0" aria-controls="fl-accordion-kago2701m894-panel-0"><i class="fl-accordion-button-icon fl-accordion-button-icon-right fas fa-minus"><span class="sr-only">Collapse</span></i></a>
</div>
<div class="fl-accordion-content fl-clearfix" id="fl-accordion-kago2701m894-panel-0" aria-labelledby="fl-accordion-kago2701m894-tab-0" role="tabpanel" aria-live="polite" style="display: block;">
<p>Some text for item 1</p>
</div>
</div>
<div class="fl-accordion-item " id="accordion-1">
<div class="fl-accordion-button" id="fl-accordion-kago2701m894-tab-1" aria-selected="false" aria-controls="fl-accordion-kago2701m894-panel-1" aria-expanded="false" role="tab" tabindex="0">
<a href="#" role="button" id="fl-accordion-kago2701m894-label-1" class="fl-accordion-button-label" tabindex="0" aria-controls="fl-accordion-kago2701m894-panel-1">Item 2</a>
<a href="#" role="button" id="fl-accordion-kago2701m894-icon-1" class="fl-accordion-button-icon" tabindex="0" aria-controls="fl-accordion-kago2701m894-panel-1"><i class="fl-accordion-button-icon fl-accordion-button-icon-right fas fa-plus"><span class="sr-only">Expand</span></i></a>
</div>
<div class="fl-accordion-content fl-clearfix" id="fl-accordion-kago2701m894-panel-1" aria-labelledby="fl-accordion-kago2701m894-tab-1" role="tabpanel" aria-live="polite">
<p>Some text for item 2</p>
</div>
</div>
</div>

[adamraine]

Looks like this was changed when we upgraded to axe-core 4.5.0 (Likely dequelabs/axe-core#3597)

From what I can tell, this is working as intended. tab needs to be a direct child of tablist. If you have any further questions, I recommend asking on https://github.com/dequelabs/axe-core.

[Robanna777]

Thank you for the reply. I will investigate this further and request that the accordion authors update their code. Thank you,

…

________________ Rob Anna Communications Manager Apex Park and Recreation District 13150 W. 72nd Ave. Arvada, CO 80005 303.403.2517 ApexPRD.org<http://ApexPRD.org> On May 2, 2023, at 3:26 PM, Adam Raine ***@***.******@***.***>> wrote: Looks like this was changed when we upgraded to axe-core 4.5.0 (Likely dequelabs/axe-core#3597<dequelabs/axe-core#3597>) From what I can tell, this is working as intended. tab needs to be a direct child of tablist<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#:~:text=Elements%20with%20the%20role%20tab%20must%20either%20be%20a%20child%20of%20an%20element%20with%20the%20tablist%20role%2C%20or%20have%20their%20id%20as%20part%20of%20the%20aria%2Downs%20property%20of%20a%20tablist>. If you have any further questions, I recommend asking on https://github.com/dequelabs/axe-core. — Reply to this email directly, view it on GitHub<#15032 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A7SD25ZNI7HHFW35CNUEWJLXEF3YBANCNFSM6AAAAAAXTQMAQM>. You are receiving this because you authored the thread.Message ID: ***@***.***>