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

View Source

Flags elements that use phx-click-away for dismissal but provide no keyboard equivalent, leaving keyboard and screen-reader users unable to close the overlay.

What's flagged

An element with phx-click-away that is not:

  • carrying a phx-window-keydown or phx-keydown handler paired with phx-key="Escape" on the same element
  • a dialog (role="dialog" or role="alertdialog"), which is assumed to manage its own focus and Escape handling

Fix

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

<!-- Good -->
<div
  id="menu"
  phx-click-away={JS.hide(to: "#menu")}
  phx-window-keydown={JS.hide(to: "#menu")}
  phx-key="Escape"
>
  ...
</div>