[ @sdxc/ui/mixins ]
ariaChecked
Keeps aria-checked on a native checked-state control in sync with its live checkedness, since the attribute is static and won't follow a control's state on its own.
import { ariaChecked } from "@sdxc/ui/mixins";Usage
Adds aria-checked to a checkbox, switch, or radio, syncing it from the
host's own render-time state and again on every change. Apply the mixin
to every radio in a shared group — a change refreshes only the ones that carry it.
Signature
ariaChecked(): MixinDescriptor<HTMLInputElement>Returns a mixin descriptor for a checkbox's, switch's, or radio's mix prop.
Examples
<Switch name="notifications" defaultChecked mix={[ariaChecked()]}>
{t("settings.notifications.label")}
</Switch><Checkbox name="terms" mix={[ariaChecked()]}>{t("signup.acceptTerms")}</Checkbox>// A radio's own input sits behind the `parts.input` passthrough.
<RadioGroup.Radio value="express" parts={{ input: [ariaChecked()] }}>
{t("shipping.express")}
</RadioGroup.Radio>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
syncAriaChecked
Rewrites CHECKED_ATTRIBUTE on control, and on its sibling radios,
since picking one radio unchecks another with no change event of its own.
Call this directly after a programmatic checked/indeterminate write or a form reset, neither of which fires change.
syncAriaChecked(control: HTMLInputElement): void| Parameter | Type | Description |
|---|---|---|
control | HTMLInputElement | Mounted checkbox or radio whose attribute is brought back in line. |
selectAll.indeterminate = someButNotAllSelected;
syncAriaChecked(selectAll);