# `Excessibility.LiveViewRules.Rules.ToggleMissingAriaState`
[🔗](https://github.com/lessthanseventy/excessibility/blob/v0.18.1/lib/excessibility/live_view_rules/rules/toggle_missing_aria_state.ex#L1)

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>

---

*Consult [api-reference.md](api-reference.md) for complete listing*