diff --git a/README.md b/README.md index dafcfd0640..cc24b23d92 100644 --- a/README.md +++ b/README.md @@ -239,6 +239,7 @@ To disable a rule for an entire `.gjs`/`.gts` file, use a regular ESLint file-le | [template-no-heading-inside-button](docs/rules/template-no-heading-inside-button.md) | disallow heading elements inside button elements | 📋 | | | | [template-no-invalid-aria-attributes](docs/rules/template-no-invalid-aria-attributes.md) | disallow invalid aria-* attributes | 📋 | | | | [template-no-invalid-interactive](docs/rules/template-no-invalid-interactive.md) | disallow non-interactive elements with interactive handlers | 📋 | | | +| [template-no-invalid-link-href](docs/rules/template-no-invalid-link-href.md) | disallow invalid href values on `` and `` elements | | | | | [template-no-invalid-link-text](docs/rules/template-no-invalid-link-text.md) | disallow invalid or uninformative link text content | 📋 | | | | [template-no-invalid-link-title](docs/rules/template-no-invalid-link-title.md) | disallow invalid title attributes on link elements | 📋 | | | | [template-no-invalid-role](docs/rules/template-no-invalid-role.md) | disallow invalid ARIA roles | 📋 | | | diff --git a/docs/rules/template-no-invalid-link-href.md b/docs/rules/template-no-invalid-link-href.md new file mode 100644 index 0000000000..ca2e89e8f2 --- /dev/null +++ b/docs/rules/template-no-invalid-link-href.md @@ -0,0 +1,51 @@ +# ember/template-no-invalid-link-href + + + +Disallow link elements — `` and `` — whose `href` value is a commonly-misused placeholder (e.g. `href="#"`, `href=""`, `href="javascript:..."`). Both carry URL semantics per the HTML spec ([the `` element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element), [the `` element](https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element)), so the same validity rules apply on each. + +This rule is **pragmatic accessibility/UX guidance, not spec enforcement.** Values like `href="#"` and `href="javascript:void(0)"` are technically valid URLs per the [HTML spec](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element); the rule flags them because they are widely-recognized anti-patterns for faking a clickable anchor: + +- Breaks expected keyboard behavior (anchors should navigate; buttons should act) +- The `javascript:` pseudo-protocol is [called out as an anti-pattern by MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#javascript_pseudo-protocol) +- Leaves assistive tech announcing a link that doesn't navigate + +If a click handler is what you want, use a `