I have an accordion that is rendered using van11y-accessible-accordion-aria
The markup outputs as:
<div className="c-accordion__items js-accordion accordion" data-accordion-cool-selectors="1" aria-multiselectable="true" role="tablist" id="z3j2diubs8r" data-hashaccordion-id="3o3nlqickh">
<!-- note role="tablist" above -->
<div className="c-accordion__item">
<h2 className="c-accordion__title accordion__title">
<button className="js-accordion__header accordion__header" role="tab" id="accordionz3j2diubs8r_tab1" aria-controls="accordionz3j2diubs8r_panel1" aria-selected="false" type="button" data-hashaccordion-id="3o3nlqickh" aria-expanded="false">
<!-- note role="tab" above -->
The Why
</button>
</h2>
<div className="c-accordion__item-components js-accordion__panel accordion__panel" role="tabpanel"
aria-labelledby="accordionz3j2diubs8r_tab1" id="accordionz3j2diubs8r_panel1" data-hashaccordion-id="3o3nlqickh"
aria-hidden="true">
<div className="c-accordion__item-content">
<p>Duis vel nibh at velit scelerisque suscipit. Donec vitae sapien ut libero venenatis faucibus. Quisque ut
nisi. Ut non enim eleifend felis pretium feugiat. Nulla sit amet est.</p>
</div>
</div>
</div>
</div>
When I test this for accessibility using Lighthouse in Chrome, I am getting these messages
Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children. Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. Learn more.
[role]s are not contained by their required parent element Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions. Learn more.
The learn more links goes to https://web.dev/aria-required-children
... and there it implies that having role="tablist"
as the parent and then role="tab"
for the child.
In my code posted in this question, I seem to have the proper markup as compared to the example from https://web.dev/aria-required-childre
So I am at a loss as to why this is failing the accessibility check.
Aucun commentaire:
Enregistrer un commentaire