# `Soundcheck.Check.Design.ClickOnNonInteractiveElement`
[🔗](https://github.com/leonqadirie/soundcheck/blob/v0.1.0/lib/soundcheck/check/design/click_on_non_interactive_element.ex#L1)

## Basics

> #### This check is disabled by default. {: .neutral}
>
> [Learn how to enable it](`e:credo:config_file.html#checks`) via `.credo.exs`.

This check has a base priority of `normal` and works with any version of Elixir.

## Explanation

Flags `phx-click` on elements that are not interactive (`div`,
`span`, `li`, ...) and give keyboard and assistive-technology users no
way in: no `role`, no `tabindex`, and no `phx-keydown` or `phx-keyup`.
Screen readers do not announce the element as clickable, and keyboard
users cannot reach it.

Before:

    <div phx-click="open">Details</div>

After:

    <button type="button" phx-click="open">Details</button>

or, when the element must stay a `div`:

    <div role="button" tabindex="0" phx-click="open" phx-keydown="open" phx-key="Enter">

Confidence: high. Tier: syntactic (works without compiling).

## Check-Specific Parameters

Use the following parameters to configure this check:

### `:excluded_paths`

  Paths to skip (atoms, binaries as path segments, or regexes).

*This parameter defaults to* `[~r/\/test\//, "test"]`.

### `:strict`

  Unused.

*This parameter defaults to* `false`.

### `:non_interactive_tags`

  HTML tags that are not interactive by default.

*This parameter defaults to* `["div", "span", "li", "td", "tr", "img", "p", "section", "article"]`.

## General Parameters

Like with all checks, [general params](`e:credo:check_params.html`) can be applied.

Parameters can be configured via the [`.credo.exs` config file](`e:credo:config_file.html`).

---

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