ARIA Attributes

The ARIA attributes are typed properties on every tag, like the other HTML attributes. They are kept in their own module so they do not crowd the completion list. Open it to use them:

open Partas.Solid.Aria

button (ariaLabel = "Close dialog", ariaControls = "menu-1") { "x" }

The bindings come from Oxpecker.Solid, by Lanayx.

The plugin writes each one under its attribute name, so ariaLabel = "Close" becomes aria-label="Close". role is in the same module.

open Partas.Solid.Aria

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

    button (
        role = "switch",
        ariaChecked = string (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={toString(on())}
        aria-label="Details"
        onClick={(_arg) => {
            patternInput[1](!on());
        }}>
        {on() ? ("Details: on") : ("Details: off")}
    </button>;
}

Boolean attributes

ariaDisabled, ariaHidden, ariaModal, ariaMultiLine and ariaMultiSelectable are typed bool. The plugin writes them as the strings "true" and "false", so ariaHidden = false becomes aria-hidden="false". This matters because Solid 2 removes an attribute whose value is false, and ARIA reads a missing attribute differently from "false". The other states, such as ariaExpanded and ariaChecked, are typed string: pass "true" or "false".

Attributes