feat: add tab-active style for tabs with aria-selected="true" att…

…ribute

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.

[WAI ARIA Guidelines]: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
[:is]: https://developer.mozilla.org/en-US/docs/Web/CSS/:is

src/components/styled/tab.css

@@ -10,7 +10,7 @@
   color: var(--tab-color);
   padding-inline-start: var(--tab-padding, 1rem);
   padding-inline-end: var(--tab-padding, 1rem);
-  &.tab-active:not(.tab-disabled):not([disabled]),
+  &:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]),
   &:is(input:checked) {
     @apply border-base-content border-opacity-100 text-opacity-100;
   }
@@ -47,7 +47,7 @@
   padding-inline-start: var(--tab-padding, 1rem);
   padding-inline-end: var(--tab-padding, 1rem);
   padding-top: var(--tab-border, 1px);
-  &.tab-active:not(.tab-disabled):not([disabled]),
+  &:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]),
   &:is(input:checked) {
     background-color: var(--tab-bg);
     border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
@@ -108,9 +108,9 @@
   }
 }
 .tabs-lifted
-  > .tab-active:not(.tab-disabled):not([disabled])
+  > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
   + .tabs-lifted
-  .tab-active:not(.tab-disabled):not([disabled]),
+  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]),
 .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked) {
   &:before {
     background-image: var(--radius-end);
@@ -122,7 +122,7 @@
   .tab {
     @apply rounded-btn;
   }
-  .tab-active:not(.tab-disabled):not([disabled]),
+  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]),
   :is(input:checked) {
     @apply bg-primary text-primary-content [@media(hover:hover)]:hover:text-primary-content;
   }

src/components/unstyled/tab.css

@@ -2,8 +2,8 @@
   @apply grid items-end;
 }
 .tabs-lifted {
-  &:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
-  &:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
+  &:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])),
+  &:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
     @apply border-b-transparent;
   }
 }
@@ -26,11 +26,11 @@
   @apply col-start-1 col-end-[span_9999] row-start-2 -mt-[--tab-border] hidden border-transparent;
   border-width: var(--tab-border, 0);
   :checked + &:nth-child(2),
-  .tab-active + &:nth-child(2) {
+  :is(.tab-active, [aria-selected="true"]) + &:nth-child(2) {
     @apply rounded-ss-none;
   }
 }
 input.tab:checked + .tab-content,
-.tab-active + .tab-content {
+:is(.tab-active, [aria-selected="true"]) + .tab-content {
   @apply block;
 }