search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.91k stars 309 forks source link

Accordion/Collapse panel markup missing `role="region"` #373

Closed c-vetter closed 5 months ago

c-vetter commented 6 months ago

The accordion and collapse panels are presented with markup like this:

<div id="hs-basic-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-heading-three">

This way, aria-labelledby is ignored. To make it work correctly, add role="region", like so:

- <div id="hs-basic-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-heading-three">
+ <div id="hs-basic-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-heading-three" role="region">

See https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

jahaganiev commented 5 months ago

Hey @c-vetter - thanks for the suggestions. We will re-visit aria data attributes in future updates. Thanks!

Duplicated #365

jahaganiev commented 4 months ago

Hey @c-vetter - our team released v2.4.0 update which includes enhancements for this case. Thanks!