Validates that rendered HTML uses links for durable navigation.

This check is intentionally narrow. It only inspects rendered non-a elements with phx-click attributes and only flags JSON LiveView JS command sequences containing navigate or patch.

Examples

Bad:

<button phx-click='[["navigate",{"href":"/settings","replace":false}]]'>
  Settings
</button>

Why this is bad:

The button performs durable navigation, but browsers and assistive technology cannot treat it like a link. Users lose normal link affordances such as opening in a new tab, copying the target URL, and seeing a destination.

Better:

<a href="/settings">Settings</a>

Why this is better:

The destination is represented as a link in the rendered HTML.

Bad:

<div phx-click='[["patch",{"href":"/users","replace":false}]]'>Users</div>

Why this is bad:

A non-interactive element is handling navigation. It needs extra keyboard and accessibility work and still does not expose a durable destination.

Better:

<a href="/users" data-phx-link="patch" data-phx-link-state="push">Users</a>

Why this is better:

LiveView patch navigation is still rendered as an anchor with an href.

Notes

This check only detects JSON-encoded LiveView JS command sequences in phx-click attributes. It flags navigate and patch commands on rendered elements other than <a>.

Non-navigation phx-click events are allowed:

<button type="button" phx-click="save">Save</button>
<button type="button" phx-click='[["push",{"event":"save"}]]'>Save</button>

Malformed or non-JSON phx-click values are ignored because this check only validates command sequences it can identify.

Options

This check has no check-specific options. Add the module directly to the explicit checks list:

Bylaw.HTML.Check.PreferLinkForNavigation

Usage

Add this module to the explicit check list passed through Bylaw.HTML. See Bylaw.HTML for the full rendered HTML validation setup.