setAccessibility method

DOMElement setAccessibility({
  1. String? role,
  2. String? ariaLabel,
  3. Map<String, Object?>? aria,
  4. int? tabIndex,
})

Sets the accessibility attributes of this element (for assistive technologies and browser automation): role (role), ariaLabel (aria-label), any other aria-* attribute in aria and tabIndex (tabindex).

  • A parameter left null keeps the current attribute.
  • An aria key with or without its prefix, in any case: hidden, aria-hidden, ariaHidden and aria_hidden are aria-hidden. An empty key throws an ArgumentError.
  • An aria value is a string: a bool is "true" or "false" (an aria-* attribute isn't a boolean attribute, whose presence alone would mean true), an Iterable its items joined by spaces (an ID list: aria-describedby, aria-controls...), an Enum its name (ascending for aria-sort), anything else its toString(). A null value removes the attribute.
  • ariaLabel wins over an aria label entry.
  • Set on a generated element (isGenerated), the real one is updated too (e.g. toggling aria-expanded on a click).

A clickable non-interactive element (a div with a click listener) needs a role (button, link...), a name (ariaLabel, or its text) and, to be reached by the keyboard, a tabIndex of 0.

Implementation

DOMElement setAccessibility({
  String? role,
  String? ariaLabel,
  Map<String, Object?>? aria,
  int? tabIndex,
}) {
  if (role != null) _setAccessibilityAttribute('role', role);

  if (aria != null) {
    for (var e in aria.entries) {
      _setAccessibilityAttribute(
        ariaAttributeName(e.key),
        ariaAttributeValue(e.value),
      );
    }
  }

  if (ariaLabel != null) _setAccessibilityAttribute('aria-label', ariaLabel);

  if (tabIndex != null) _setAccessibilityAttribute('tabindex', '$tabIndex');

  return this;
}