Merge pull request #2485 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-nested-landmark

Extract rule: template-no-nested-landmark

Author: NullVoxPopuli

README.md

@@ -189,6 +189,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-empty-headings](docs/rules/template-no-empty-headings.md)                       | disallow empty heading elements                                                  |    |    |    |
 | [template-no-heading-inside-button](docs/rules/template-no-heading-inside-button.md)         | disallow heading elements inside button elements                                 |    |    |    |
 | [template-no-invalid-interactive](docs/rules/template-no-invalid-interactive.md)             | disallow non-interactive elements with interactive handlers                      |    |    |    |
+| [template-no-nested-landmark](docs/rules/template-no-nested-landmark.md)                     | disallow nested landmark elements                                                |    |    |    |
 
 ### Best Practices
 

docs/rules/template-no-nested-landmark.md

@@ -0,0 +1,90 @@
+# ember/template-no-nested-landmark
+
+<!-- end auto-generated rule header -->
+
+Disallows nesting landmark elements of the same type.
+
+Landmark elements should not be nested within other landmarks of the same name. This creates confusion for screen reader users navigating by landmarks.
+
+## Rule Details
+
+This rule disallows nesting landmark elements or roles within other landmark elements or roles of the same type.
+
+Landmark elements include:
+
+- `<header>` (banner)
+- `<nav>` (navigation)
+- `<main>` (main)
+- `<aside>` (complementary)
+- `<footer>` (contentinfo)
+- `<section>` (region)
+- `<form>` (form)
+- Elements with landmark roles
+
+## List of elements & their corresponding roles
+
+- header (banner)
+- main (main)
+- aside (complementary)
+- form (form, search)
+- main (main)
+- nav (navigation)
+- footer (contentinfo)
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <nav>
+    <nav>Nested navigation</nav>
+  </nav>
+</template>
+```
+
+```gjs
+<template>
+  <main>
+    <main>Nested main</main>
+  </main>
+</template>
+```
+
+```gjs
+<template>
+  <div role="navigation">
+    <nav>Nested nav</nav>
+  </div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <nav>Navigation</nav>
+  <main>Content</main>
+</template>
+```
+
+```gjs
+<template>
+  <main>
+    <nav>Navigation inside main</nav>
+  </main>
+</template>
+```
+
+```gjs
+<template>
+  <main>
+    <div>Regular content</div>
+  </main>
+</template>
+```
+
+## References
+
+- [eslint-plugin-ember template-no-nested-landmark](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-nested-landmark.md)
+- [WAI-ARIA Landmarks](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/)

lib/rules/template-no-nested-landmark.js

@@ -0,0 +1,101 @@
+const LANDMARK_ROLES = new Set([
+  'banner',
+  'complementary',
+  'contentinfo',
+  'form',
+  'main',
+  'navigation',
+  'region',
+  'search',
+]);
+
+const LANDMARK_ELEMENTS = new Set(['header', 'aside', 'footer', 'form', 'main', 'nav', 'section']);
+
+const EQUIVALENT_ROLE = {
+  aside: 'complementary',
+  footer: 'contentinfo',
+  header: 'banner',
+  main: 'main',
+  nav: 'navigation',
+  section: 'region',
+};
+
+function isLandmark(node) {
+  // Check if element is inherently a landmark
+  if (LANDMARK_ELEMENTS.has(node.tag)) {
+    return true;
+  }
+
+  // Check if element has a landmark role
+  const roleAttr = node.attributes?.find((a) => a.name === 'role');
+  if (roleAttr?.value?.type === 'GlimmerTextNode') {
+    return LANDMARK_ROLES.has(roleAttr.value.chars);
+  }
+
+  return false;
+}
+
+function getLandmarkType(node) {
+  // If node has an explicit role attribute, use that
+  const roleAttr = node.attributes?.find((a) => a.name === 'role');
+  if (roleAttr?.value?.type === 'GlimmerTextNode') {
+    return roleAttr.value.chars;
+  }
+  // Otherwise, use the equivalent role for the tag
+  return EQUIVALENT_ROLE[node.tag] || node.tag;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow nested landmark elements',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-nested-landmark.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      nested: 'Landmark elements should not be nested within other landmarks.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-nested-landmark.js',
+      docs: 'docs/rule/no-nested-landmark.md',
+      tests: 'test/unit/rules/no-nested-landmark-test.js',
+    },
+  },
+
+  create(context) {
+    const landmarkStack = [];
+
+    return {
+      GlimmerElementNode(node) {
+        const isCurrentLandmark = isLandmark(node);
+
+        if (isCurrentLandmark) {
+          const currentType = getLandmarkType(node);
+          // Check if any ancestor landmark has the same type
+          for (const ancestor of landmarkStack) {
+            if (getLandmarkType(ancestor) === currentType) {
+              context.report({
+                node,
+                messageId: 'nested',
+              });
+              break;
+            }
+          }
+          landmarkStack.push(node);
+        }
+      },
+
+      'GlimmerElementNode:exit'(node) {
+        if (isLandmark(node)) {
+          landmarkStack.pop();
+        }
+      },
+    };
+  },
+};