# 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.

```ts
import { aria } from "@sdxc/u/state";
```

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.

## 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:

```tsx
<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:

```tsx
<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`:

```tsx
<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.

```ts
u.at("md", u.aria("selected", "true", u.bg("brand.tint")))
```

## Signature

```ts
u.aria(attribute: string, input: UtilityInput<Node>)
```