From 20f6ab01e0890277c4d69e181a46fc5fc3e2c9f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Thu, 7 May 2026 20:35:51 +0200
Subject: [PATCH] recommended: disable noisy stylistic rules; demote
 prefer-native-element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Goal: ":recommended" should give "pure value" — content-model bugs,
a11y issues, missing required attributes — not pedantic style
preferences. Trim the html-validate-recommended noise that fires on
legitimate Ember/Glimmer patterns:

- `no-inline-style: off` — bans `style=` attribute. Breaks legitimate
  runtime style-binding (`<div style={{this.computedStyle}}>`). Use a
  separate stylelint pipeline for inline-style policy if needed.

- `void-style: off` — html-validate defaults to omit, Ember/Glimmer
  convention is selfclosing, mixing is harmless. Previously the
  `:gts-recommended` preset overrode to `selfclosing`, which fought
  projects using the omit form. Now disabled entirely; teams enforce
  via `ember-template-lint` if they want that policy.

- `prefer-native-element: warn` — kept on but demoted from error.
  Real a11y signal (`<div role="button">` should usually be
  `<button>`), but design systems intentionally wrap generic elements
  with role+keyboard handling. Surfaced as a warning so it doesn't
  fail builds; teams can promote back to error per-project.

`:recommended` and `:gts-recommended` now resolve to identical rule
sets. The alias stays for backwards compatibility — existing
consumers' `extends` keep working.

151/151 pass.
---
 index.ts | 65 +++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 46 insertions(+), 19 deletions(-)

diff --git a/index.ts b/index.ts
index ebb7cbf..09b806f 100644
--- a/index.ts
+++ b/index.ts
@@ -70,16 +70,37 @@ const TRANSFORMER_ARTIFACT_RULES: RuleConfig = {
   'no-raw-characters': 'off',
 };
 
-// Ember/Glimmer ecosystem style preferences, baked in for projects that
-// want their lint to match `ember-template-lint` conventions out of the
-// box. Layered on top of TRANSFORMER_ARTIFACT_RULES in `:gts-recommended`.
-const EMBER_STYLE_RULES: RuleConfig = {
-  // Ember/Glimmer convention is self-closing for void elements (`<input />`,
-  // `<br />`, `<img />`). `ember-template-lint`'s `self-closing-void-elements`
-  // rule enforces this. html-validate's default is the omitted form
-  // (`<input>`), which would fight every Ember template — match the
-  // ecosystem default. Rule still fires on style-mixing.
-  'void-style': ['error', { style: 'selfclosing' }],
+// Stylistic rules from `html-validate:recommended` that fire on
+// legitimate Ember/Glimmer code without catching real bugs. Disabled
+// here so the lint experience is signal-first ("did I write something
+// that breaks at runtime / fails a11y / produces invalid HTML?") rather
+// than pedantic-first ("did I follow our preferred attribute style?").
+//
+// Each entry is a deliberate choice: the rule has a legitimate
+// motivation, but its trade-offs in an Ember context tip toward noise.
+// Projects that want them back can re-enable per-rule.
+const STYLISTIC_NOISE_OFF: RuleConfig = {
+  // Bans the `style="..."` attribute. Breaks legitimate runtime
+  // style-binding (`<div style={{this.computedStyle}}>`) — a common
+  // pattern when computed style depends on component args. Use a
+  // separate stylelint pipeline for inline-style policy if needed.
+  'no-inline-style': 'off',
+  // Insists on either `<input>` (omit) or `<input />` (selfclosing) —
+  // never both. html-validate defaults to omit; Ember/Glimmer
+  // convention is selfclosing; mixing is harmless. Rather than pick a
+  // side and litter every Ember project with violations of the
+  // opposite default, disable the rule entirely. (`ember-template-lint`
+  // already enforces selfclosing if a project wants that policy.)
+  'void-style': 'off',
+  // `prefer-native-element` flags `<div role="button">` and similar
+  // ARIA-on-generic-element patterns, suggesting the user reach for
+  // `<button>` instead. Real a11y signal — but design systems
+  // (HDS, ember-primitives, internal libraries) intentionally wrap
+  // generic elements with role+keyboard handling when the use case
+  // doesn't fit the native semantics. Demote to `warn` so it surfaces
+  // in lint output but doesn't fail builds; teams can promote back to
+  // `error` per-project if they want that policy.
+  'prefer-native-element': 'warn',
 };
 
 const plugin: Plugin = {
@@ -95,20 +116,26 @@ const plugin: Plugin = {
     });
   },
   configs: {
-    // Minimal preset: transformer essentials only. Pick this if you want
-    // to take all html-validate / project-level defaults and only have
-    // this plugin disable the rules that fire on transformer artifacts.
+    // Recommended preset for Ember/Glimmer projects. Disables:
+    //   - rules that fire on transformer-emission artifacts (required
+    //     for the plugin to work correctly), and
+    //   - stylistic rules from `html-validate:recommended` whose
+    //     trade-offs tip toward noise in an Ember codebase.
+    // Otherwise inherits `html-validate:recommended` as-is (a11y rules,
+    // content-model rules, required-attribute rules, etc.).
     recommended: {
       elements: ELEMENTS,
-      rules: TRANSFORMER_ARTIFACT_RULES,
+      rules: { ...TRANSFORMER_ARTIFACT_RULES, ...STYLISTIC_NOISE_OFF },
     },
-    // Opinionated preset for Ember/Glimmer projects. Includes everything
-    // in `:recommended` plus style preferences that match
-    // `ember-template-lint` conventions (self-closing void elements,
-    // etc.). Most Ember projects should extend this.
+    // Backwards-compat alias. `:gts-recommended` previously layered
+    // Ember-style opinions (self-closing void elements) on top of
+    // `:recommended`; those have been folded back out (`void-style` is
+    // now off, see STYLISTIC_NOISE_OFF). The two presets are currently
+    // identical; the alias stays so existing consumers don't need to
+    // edit their `extends`.
     'gts-recommended': {
       elements: ELEMENTS,
-      rules: { ...TRANSFORMER_ARTIFACT_RULES, ...EMBER_STYLE_RULES },
+      rules: { ...TRANSFORMER_ARTIFACT_RULES, ...STYLISTIC_NOISE_OFF },
     },
   },
 };