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

View Source

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>