dimanche 18 avril 2021

Accordion is failing accessibility check

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

enter image description here

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