Excessibility.LiveViewRules.Rules.ToggleMissingAriaState (Excessibility v0.14.0)

View Source

Flags elements that use Phoenix.LiveView.JS.toggle/show/hide in phx-click but do not expose the expand/collapse state to assistive technology.

LiveView's JS commands serialize to a JSON array in the rendered HTML: phx-click="[[\"toggle\",{\"to\":\"#menu\"}]]". This rule parses that JSON, detects toggle/show/hide operations, and verifies that the trigger element carries aria-expanded. Missing aria-controls is reported in the same finding when the toggle target is known.

What's flagged

Elements whose phx-click contains a toggle, show, or hide operation, and that are missing aria-expanded. aria-haspopup is not required (not every toggle is a menu or listbox).

Fix

<!-- Bad -->
<div phx-click={JS.toggle(to: "#menu")}>
  Open menu
</div>

<!-- Good -->
<button
  type="button"
  phx-click={JS.toggle(to: "#menu")}
  aria-expanded="false"
  aria-controls="menu"
>
  Open menu
</button>