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

Flags `phx-click` and `phx-click-away` placed on elements that are not
natively keyboard-accessible.

axe-core cannot catch this because it doesn't understand Phoenix event
attributes. The result is a visually clickable element that is
unreachable by keyboard users — no focus, no Enter/Space handling, no
assistive-tech affordances.

`phx-click-away` is **not** flagged here: it fires when the user clicks
*elsewhere*, so the element is never an activation target and does not need
to be keyboard-focusable. Keyboard dismissal of click-away overlays is
covered by `click_away_without_escape`.

## What's flagged

Any element carrying `phx-click` that is **not**:

  * a natively interactive element (`<a>`, `<button>`, `<input>`,
    `<select>`, `<textarea>`, `<summary>`, `<details>`)
  * an element with a `tabindex` attribute
  * an element with an interactive `role` attribute (`button`, `link`,
    `option`, `menuitem`, `tab`, `checkbox`, `radio`, `switch`, etc.)

## Fix

Prefer a real `<button type="button">` or `<a href="...">`. If the
design requires a non-semantic tag, add `tabindex="0"`, an appropriate
`role`, and keyboard event handlers (Enter/Space).

    <!-- Bad -->
    <li phx-click="select">Item</li>

    <!-- Good -->
    <li><button type="button" phx-click="select">Item</button></li>

---

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