Skip to content

Commit

Permalink
feat: add tab-active style for tabs with aria-selected="true" att…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
seanpdoyle authored May 7, 2024
1 parent 16b3ce6 commit 213ee58
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 9 deletions.
10 changes: 5 additions & 5 deletions src/components/styled/tab.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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;
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/unstyled/tab.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand All @@ -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;
}

0 comments on commit 213ee58

Please sign in to comment.