@tempots/dom

@tempots/dom > aria

aria variable

An object that provides a convenient way to create mountable attributes for ARIA properties.

The type of the value is inferred from the attribute name.

Signature:

aria: {
    activedescendant: (value: NValue<string>) => Renderable;
    atomic: (value: NValue<boolean>) => Renderable;
    autocomplete: (value: NValue<"none" | "inline" | "list" | "both">) => Renderable;
    busy: (value: NValue<boolean>) => Renderable;
    checked: (value: NValue<boolean | "mixed" | "false" | "true">) => Renderable;
    colcount: (value: NValue<number>) => Renderable;
    colindex: (value: NValue<number>) => Renderable;
    colspan: (value: NValue<number>) => Renderable;
    controls: (value: NValue<string>) => Renderable;
    current: (value: NValue<string>) => Renderable;
    describedby: (value: NValue<string>) => Renderable;
    details: (value: NValue<string>) => Renderable;
    disabled: (value: NValue<boolean>) => Renderable;
    dropeffect: (value: NValue<"none" | "copy" | "execute" | "link" | "move" | "popup">) => Renderable;
    errormessage: (value: NValue<string>) => Renderable;
    expanded: (value: NValue<boolean | "false" | "true">) => Renderable;
    flowto: (value: NValue<string>) => Renderable;
    grabbed: (value: NValue<boolean | "false" | "true">) => Renderable;
    haspopup: (value: NValue<boolean>) => Renderable;
    hidden: (value: NValue<boolean>) => Renderable;
    invalid: (value: NValue<boolean | "false" | "true" | "grammar" | "spelling">) => Renderable;
    keyshortcuts: (value: NValue<string>) => Renderable;
    label: (value: NValue<string>) => Renderable;
    labelledby: (value: NValue<string>) => Renderable;
    level: (value: NValue<number>) => Renderable;
    live: (value: NValue<"off" | "assertive" | "polite">) => Renderable;
    modal: (value: NValue<boolean>) => Renderable;
    multiline: (value: NValue<boolean>) => Renderable;
    multiselectable: (value: NValue<boolean>) => Renderable;
    orientation: (value: NValue<"horizontal" | "vertical">) => Renderable;
    owns: (value: NValue<string>) => Renderable;
    placeholder: (value: NValue<string>) => Renderable;
    posinset: (value: NValue<number>) => Renderable;
    pressed: (value: NValue<boolean | "mixed" | "false" | "true">) => Renderable;
    readonly: (value: NValue<boolean>) => Renderable;
    relevant: (value: NValue<"additions" | "removals" | "text" | "all">) => Renderable;
    required: (value: NValue<boolean>) => Renderable;
    roledescription: (value: NValue<string>) => Renderable;
    rowcount: (value: NValue<number>) => Renderable;
    rowindex: (value: NValue<number>) => Renderable;
    rowspan: (value: NValue<number>) => Renderable;
    selected: (value: NValue<boolean>) => Renderable;
    setsize: (value: NValue<number>) => Renderable;
    sort: (value: NValue<"none" | "ascending" | "descending" | "other">) => Renderable;
    valuemax: (value: NValue<number>) => Renderable;
    valuemin: (value: NValue<number>) => Renderable;
    valuenow: (value: NValue<number>) => Renderable;
    valuetext: (value: NValue<string>) => Renderable;
}

Example

const button = html.button(
  aria.label('Click me!'), // maps to the `aria-label` attribute
  // maps to the `aria-pressed` attribute where pressed is a `Signal`
  aria.pressed(pressed)
)