ARIA Attributes

The ARIA attributes are typed properties on every HTML tag, kept in their own module so they do not crowd the completion list. open Partas.Solid.Aria to use them:

button (ariaLabel = "Close dialog", ariaHasPopup = Attr.AriaHaspopup.Dialog) { "x" }

export function Cell_c2() {
    return <button aria-label="Close dialog"
        aria-haspopup="dialog">
        x
    </button>;
}

The plugin writes each one under its attribute name: ariaLabel becomes aria-label. role is in the same module, typed Attr.AriaRole.

Booleans

ARIA's true/false states are typed bool, and the plugin writes them as the strings "true" and "false". Solid 2 removes an attribute whose value is false, and ARIA reads a missing attribute differently from "false", so ariaHidden = false has to become aria-hidden="false". Toggle the switch and inspect it:

[<SolidComponent>]
let DetailsSwitch () =
    let on, setOn = createSignal false

    button (
        role = Attr.AriaRole.Switch,
        ariaChecked = on (),
        ariaLabel = "Details",
        onClick = fun _ -> setOn (not (on ()))
    ) {
        if on () then "Details: on" else "Details: off"
    }

export function DetailsSwitch() {
    const patternInput = createSignal(false);
    const on = patternInput[0];
    return <button role="switch"
        aria-checked={String(on())}
        aria-label="Details"
        onClick={(_arg) => {
            patternInput[1](!on());
        }}>
        {on() ? ("Details: on") : ("Details: off")}
    </button>;
}

Types

The U2 cases convert implicitly, so ariaChecked = true, ariaChecked = Attr.AriaChecked.Mixed and ariaLevel = 2.0 all compile.

SVG elements do not use this module. Their ARIA attributes are on the elements themselves, as ``aria-hidden`` with a camelCase alias (ariaHidden), typed with the Attr.SvgAria* unions. See SVG elements.