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>
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,