Extract rule: template-no-empty-headings

Author: NullVoxPopuli

README.md

@@ -186,6 +186,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-aria-hidden-body](docs/rules/template-no-aria-hidden-body.md)                   | disallow aria-hidden on body element                                             |    | 🔧 |    |
 | [template-no-aria-unsupported-elements](docs/rules/template-no-aria-unsupported-elements.md) | disallow ARIA roles, states, and properties on elements that do not support them |    |    |    |
 | [template-no-autofocus-attribute](docs/rules/template-no-autofocus-attribute.md)             | disallow autofocus attribute                                                     |    | 🔧 |    |
+| [template-no-empty-headings](docs/rules/template-no-empty-headings.md)                       | disallow empty heading elements                                                  |    |    |    |
 
 ### Best Practices
 

docs/rules/template-no-empty-headings.md

@@ -0,0 +1,53 @@
+# ember/template-no-empty-headings
+
+<!-- end auto-generated rule header -->
+
+Headings relay the structure of a webpage and provide a meaningful, hierarchical order of its content. If headings are empty or its text contents are inaccessible, this could confuse users or prevent them accessing sections of interest.
+
+Disallow headings (h1, h2, etc.) with no accessible text content.
+
+## Examples
+
+This rule **forbids** the following:
+
+```hbs
+<h*></h*>
+```
+
+```hbs
+<div role='heading' aria-level='1'></div>
+```
+
+```hbs
+<h*><span aria-hidden='true'>Inaccessible text</span></h*>
+```
+
+This rule **allows** the following:
+
+```hbs
+<h*>Heading Content</h*>
+```
+
+```hbs
+<h*><span>Text</span><h*>
+```
+
+```hbs
+<div role='heading' aria-level='1'>Heading Content</div>
+```
+
+```hbs
+<h* aria-hidden='true'>Heading Content</h*>
+```
+
+```hbs
+<h* hidden>Heading Content</h*>
+```
+
+## Migration
+
+If violations are found, remediation should be planned to ensure text content is present and visible and/or screen-reader accessible. Setting `aria-hidden="false"` or removing `hidden` attributes from the element(s) containing heading text may serve as a quickfix.
+
+## References
+
+- [WCAG SC 2.4.6 Headings and Labels](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html)

lib/rules/template-no-empty-headings.js

@@ -0,0 +1,63 @@
+const HEADINGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+
+function hasTextContent(node) {
+  if (!node.children || node.children.length === 0) {
+    return false;
+  }
+
+  for (const child of node.children) {
+    // Text nodes with content
+    if (child.type === 'GlimmerTextNode' && child.chars.trim().length > 0) {
+      return true;
+    }
+    // Mustache statements or helpers
+    if (child.type === 'GlimmerMustacheStatement' || child.type === 'GlimmerBlockStatement') {
+      return true;
+    }
+    // Nested elements
+    if (child.type === 'GlimmerElementNode' && hasTextContent(child)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow empty heading elements',
+      category: 'Accessibility',
+      strictGjs: true,
+      strictGts: true,
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-empty-headings.md',
+    },
+    schema: [],
+    messages: {
+      emptyHeading:
+        'Headings must contain accessible text content (or helper/component that provides text).',
+    },
+  },
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        if (HEADINGS.has(node.tag)) {
+          // Skip if hidden
+          const hasHidden = node.attributes?.some((a) => a.name === 'hidden');
+          const ariaHidden = node.attributes?.find((a) => a.name === 'aria-hidden');
+          if (
+            hasHidden ||
+            (ariaHidden?.value?.type === 'GlimmerTextNode' && ariaHidden.value.chars === 'true')
+          ) {
+            return;
+          }
+
+          if (!hasTextContent(node)) {
+            context.report({ node, messageId: 'emptyHeading' });
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-empty-headings.js

@@ -0,0 +1,28 @@
+const rule = require('../../../lib/rules/template-no-empty-headings');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-empty-headings', rule, {
+  valid: [
+    '<template><h1>Title</h1></template>',
+    '<template><h2>{{this.title}}</h2></template>',
+    '<template><h3><span>Text</span></h3></template>',
+    '<template><h4 hidden></h4></template>',
+  ],
+  invalid: [
+    {
+      code: '<template><h1></h1></template>',
+      output: null,
+      errors: [{ messageId: 'emptyHeading' }],
+    },
+    {
+      code: '<template><h2>   </h2></template>',
+      output: null,
+      errors: [{ messageId: 'emptyHeading' }],
+    },
+  ],
+});