# `Bylaw.HTML.Check.PreferLinkForNavigation`
[🔗](https://github.com/ryanzidago/bylaw/blob/v0.1.0-alpha.2/lib/bylaw/html/check/prefer_link_for_navigation.ex#L1)

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.

# `validate`

```elixir
@spec validate(Bylaw.HTML.Check.context()) :: Bylaw.HTML.Check.result()
```

Implements the `Bylaw.HTML.Check` validation callback.

---

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