Merge pull request #2694 from johanrd/day_fix/template-no-nested-landmark

Post-merge-review: Fix template-no-nested-landmark: drop port-only section/region

Author: NullVoxPopuli

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

@@ -5,11 +5,10 @@ const LANDMARK_ROLES = new Set([
   'form',
   'main',
   'navigation',
-  'region',
   'search',
 ]);
 
-const LANDMARK_ELEMENTS = new Set(['header', 'aside', 'footer', 'form', 'main', 'nav', 'section']);
+const LANDMARK_ELEMENTS = new Set(['header', 'aside', 'footer', 'form', 'main', 'nav']);
 
 const EQUIVALENT_ROLE = {
   aside: 'complementary',

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

@@ -42,6 +42,15 @@ ruleTester.run('template-no-nested-landmark', rule, {
     '<template><div role="banner"><nav></nav></div></template>',
     '<template><header><div role="navigation"></div></header></template>',
     '<template><div role="banner"><div role="navigation"></div></div></template>',
+
+    // `<section>` only gets the `region` landmark role when it has an accessible name
+    // (aria-label/aria-labelledby/title). Without one it has the generic role — see
+    // https://www.w3.org/TR/html-aam-1.0/#el-section
+    // This rule does not inspect accessible names, so unnamed sections are excluded.
+    '<template><section><section>Content</section></section></template>',
+    // `role="region"` is the landmark role a named `<section>` gets. Nesting it is
+    // excluded for the same reason: the rule cannot verify an accessible name is present.
+    '<template><div role="region"><div role="region">Content</div></div></template>',
   ],
 
   invalid: [