[ @sdxc/u/state ]
aria
Sugar over when(...) for an element's aria-* attribute selector: two args match the attribute present with any value — including "false" — while three args match a value exactly; pass "true" for the truthy case.
import { aria } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.aria("selected", "true", u.bg("brand.tint")) | css({ '&[aria-selected="true"]': { backgroundColor: "..." } }) |
u.aria("busy", u.opacity(50)) | css({ "&[aria-busy]": { opacity: 0.5 } }) |
Examples
Basic example
Pass an attribute and a value to aria() to style an element by its aria-* state, like a pressed toggle button:
<div role="group" aria-label="Text style" mix={[...]}>
<button
type="button"
aria-pressed="true"
mix={[
bg("transparent"),
fg("neutral.muted"),
aria("pressed", "true", [bg("brand.solid"), fg("brand.onSolid")]),
cursor("pointer"),
...,
]}
>
Bold
</button>
<button
type="button"
aria-pressed="false"
mix={[
bg("transparent"),
fg("neutral.muted"),
aria("pressed", "true", [bg("brand.solid"), fg("brand.onSolid")]),
cursor("pointer"),
...,
]}
>
Italic
</button>
</div>Current page
Match any value, not only "true", like aria("current", "page", …) for the link to the page being shown:
<nav mix={[...]}>
<a
href="#docs"
mix={[
fg("neutral.muted"),
text("sm"),
pb(1),
borderEdge("block-end", { color: "transparent", width: 2 }),
aria("current", "page", [
fg("brand"),
weight("semibold"),
borderEdge("block-end", { color: "brand" }),
]),
]}
>
Docs
</a>
<a
href="#api"
aria-current="page"
mix={[
fg("neutral.muted"),
text("sm"),
pb(1),
borderEdge("block-end", { color: "transparent", width: 2 }),
aria("current", "page", [
fg("brand"),
weight("semibold"),
borderEdge("block-end", { color: "brand" }),
]),
]}
>
API
</a>
<a
href="#blog"
mix={[
fg("neutral.muted"),
text("sm"),
pb(1),
borderEdge("block-end", { color: "transparent", width: 2 }),
aria("current", "page", [
fg("brand"),
weight("semibold"),
borderEdge("block-end", { color: "brand" }),
]),
]}
>
Blog
</a>
</nav>Matching any value
Leave out the value to match the attribute whenever it is present, like a panel with aria-busy:
<div mix={[...]}>
<section mix={[aria("busy", [opacity(50), cursor("progress")]), ...]}>
Up to date
</section>
<section
aria-busy="true"
mix={[aria("busy", [opacity(50), cursor("progress")]), ...]}
>
Refreshing…
</section>
</div>Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.aria("selected", "true", u.bg("brand.tint")))Signature
u.aria(attribute: string, input: UtilityInput<Node>)