search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.19k stars 1.31k forks source link

Supplement `.tab-active` modifier #3023

Closed seanpdoyle closed 6 months ago

seanpdoyle commented 6 months ago

Supplement the .tab-active modifier to also support elements rendered with [aria-selected="true"]. When an element with [role="tab"] nested within a [role="tablist"] becomes "active" or "selected", its [aria-selected] attribute must be set to "true". Similarly, when a tab is inactive, its [aria-selected] must be removed or set to "false" (according to the WAI ARIA Guidelines).

Since all compliant tab implementations must set this attribute, and not all compliant tab implementations provide hooks to configure CSS Class List changes to be made alongside those attribute changes, this commit modifies the tab.css files to target either .tab-active or [aria-selected="true"] using the CSS :is psuedo-class.

saadeghi commented 6 months ago

Thanks 👍
Can you please undo the edit on the changelog file? It will be updated automatically after merge.

seanpdoyle commented 6 months ago

@saadeghi done!

I also want to share that I was unable to get the yarn playground or yarn dev running locally, so the CSS changes were made without verifying their outcome locally.

Is there somewhere I could learn more about local development? If not, could you verify they behave as you'd expect?

saadeghi commented 6 months ago

Thanks. Yes I will test it before merge.

For running on local, this guide should help: https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md#building-on-local