PR Review

Author: NullVoxPopuli

docs/rules/template-no-duplicate-landmark-elements.md

@@ -2,70 +2,68 @@
 
 <!-- end auto-generated rule header -->
 
-Disallows duplicate landmark elements without unique labels.
-
-HTML5 landmark elements (like `<nav>`, `<header>`, `<footer>`, etc.) help screen reader users navigate a page. When multiple landmarks of the same type exist, each must have a unique label to distinguish them.
+If multiple landmark elements of the same type are found on a page, they must each have a unique label (provided by `aria-label` or `aria-labelledby`).
 
 ## Rule Details
 
-This rule ensures that when multiple landmark elements of the same type appear in a template, each has a unique `aria-label` or `aria-labelledby` attribute.
-
-Landmark elements checked:
+List of elements & their corresponding roles:
 
 - `header` (banner)
-- `footer` (contentinfo)
 - `main` (main)
-- `nav` (navigation)
 - `aside` (complementary)
-- `section` (region)
 - `form` (form, search)
+- `nav` (navigation)
+- `footer` (contentinfo)
 
 ## Examples
 
-Examples of **incorrect** code for this rule:
+This rule **forbids** the following:
 
-```gjs
-<template>
-  <nav>Primary Navigation</nav>
-  <nav>Secondary Navigation</nav>
-</template>
+```hbs
+<nav></nav>
+<nav></nav>
 ```
 
-```gjs
-<template>
-  <header>Site Header</header>
-  <header>Article Header</header>
-</template>
+```hbs
+<nav></nav>
+<div role='navigation'></div>
 ```
 
-Examples of **correct** code for this rule:
+```hbs
+<nav aria-label='site navigation'></nav>
+<nav aria-label='site navigation'></nav>
+```
+
+```hbs
+<form aria-label='search-form'></form>
+<form aria-label='search-form'></form>
+```
+
+This rule **allows** the following:
+
+```hbs
+<nav aria-label='primary site navigation'></nav>
+<nav aria-label='secondary site navigation within home page'></nav>
+```
 
-```gjs
-<template>
-  <nav aria-label="Primary Navigation">Links</nav>
-  <nav aria-label="Secondary Navigation">More Links</nav>
-</template>
+```hbs
+<nav aria-label='primary site navigation'></nav>
+<div role='navigation' aria-label='secondary site navigation within home page'></div>
 ```
 
-```gjs
-<template>
-  <header aria-label="Site Header">Site Logo</header>
-  <header aria-label="Article Header">Article Title</header>
-</template>
+```hbs
+<form aria-label='shipping address'></form>
+<form aria-label='billing address'></form>
 ```
 
-```gjs
-<template>
-  <nav aria-labelledby="nav-1">
-    <h2 id="nav-1">Main Menu</h2>
-  </nav>
-  <nav aria-labelledby="nav-2">
-    <h2 id="nav-2">Side Menu</h2>
-  </nav>
-</template>
+```hbs
+<form role='search' aria-label='search'></form>
+<form aria-labelledby='form-title'><div id='form-title'>Meaningful Form Title</div></form>
 ```
 
 ## References
 
-- [ARIA Landmarks](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/)
-- [eslint-plugin-ember template-no-duplicate-landmark-elements](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-duplicate-landmark-elements.md)
+- [WAI-ARIA specification: Landmark Roles](https://www.w3.org/WAI/PF/aria/roles#landmark_roles)
+- [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
+- [Using aria-labelledby to name regions and landmarks](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA13.html)
+- [Using aria-label to provide labels for objects](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)

lib/rules/template-no-duplicate-landmark-elements.js

@@ -12,7 +12,7 @@ module.exports = {
     schema: [],
     messages: {
       duplicate:
-        'Duplicate <{{element}}> landmark element found. Each landmark must have a unique label.',
+        'If multiple landmark elements (or elements with an equivalent role) of the same type are found on a page, they must each have a unique label.',
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -30,7 +30,6 @@ module.exports = {
       main: 'main',
       nav: 'navigation',
       aside: 'complementary',
-      section: 'region',
       form: 'form',
     };
 
@@ -97,7 +96,6 @@ module.exports = {
                 context.report({
                   node: unlabeled[i].node,
                   messageId: 'duplicate',
-                  data: { element: unlabeled[i].tag },
                 });
               }
             } else {
@@ -106,7 +104,6 @@ module.exports = {
                 context.report({
                   node: entry.node,
                   messageId: 'duplicate',
-                  data: { element: entry.tag },
                 });
               }
             }
@@ -126,7 +123,6 @@ module.exports = {
                 context.report({
                   node: groupEntries[i].node,
                   messageId: 'duplicate',
-                  data: { element: groupEntries[i].tag },
                 });
               }
             }

tests/lib/rules/template-no-duplicate-landmark-elements.js

@@ -8,43 +8,19 @@ const ruleTester = new RuleTester({
 
 ruleTester.run('template-no-duplicate-landmark-elements', rule, {
   valid: [
-    '<template><header aria-label="Main">Header</header></template>',
-    '<template><nav aria-label="Primary">Nav 1</nav><nav aria-label="Secondary">Nav 2</nav></template>',
-    '<template><main>Content</main></template>',
-
-    // Nav + div with role="navigation" (different unique labels)
+    '<template><nav aria-label="primary site navigation"></nav><nav aria-label="secondary site navigation within home page"></nav></template>',
     '<template><nav aria-label="primary site navigation"></nav><div role="navigation" aria-label="secondary site navigation within home page"></div></template>',
-
-    // Form with aria-labelledby + another form with aria-label (unique labels)
     '<template><form aria-labelledby="form-title"><div id="form-title">Shipping Address</div></form><form aria-label="meaningful title of second form"></form></template>',
-
-    // Standard page layout (unique landmarks by type)
+    '<template><form role="search"></form><form></form></template>',
     '<template><header></header><main></main><footer></footer></template>',
-
-    // role="none" — not a landmark, should be ignored
     '<template><img role="none"><img role="none"></template>',
-
     // Conditional branches: elements in if/else are mutually exclusive
     '<template>{{#if this.isCreateProjectFromSavedSearchEnabled}}<form></form>{{else}}<form></form>{{/if}}</template>',
+    // header inside sectioning element loses landmark role
+    "<template><main><header><h1>Main Page Header</h1></header></main><dialog id='my-dialog'><header><h1>Dialog Header</h1></header></dialog></template>",
   ],
 
   invalid: [
-    {
-      code: '<template><nav>Nav 1</nav><nav>Nav 2</nav></template>',
-      output: null,
-      errors: [{ messageId: 'duplicate' }],
-    },
-    {
-      code: '<template><header>Header 1</header><header>Header 2</header></template>',
-      output: null,
-      errors: [{ messageId: 'duplicate' }],
-    },
-    {
-      code: '<template><aside>Side 1</aside><aside>Side 2</aside></template>',
-      output: null,
-      errors: [{ messageId: 'duplicate' }],
-    },
-
     {
       code: '<template><nav></nav><nav></nav></template>',
       output: null,