Merge pull request #2682 from johanrd/false_positive/template-no-duplicate-landmark-elements

Post-merge-review: Fix template-no-duplicate-landmark-elements false positive on dynamic aria-label

Author: NullVoxPopuli

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

@@ -157,6 +157,15 @@ module.exports = {
           isInsideSectioningElement()
         );
         if (landmarkRole) {
+          // Dynamic aria-label / aria-labelledby — can't statically determine whether
+          // this landmark duplicates a sibling, so skip registering it entirely.
+          const labelAttr =
+            node.attributes?.find((attr) => attr.name === 'aria-label') ||
+            node.attributes?.find((attr) => attr.name === 'aria-labelledby');
+          if (labelAttr && labelAttr.value?.type !== 'GlimmerTextNode') {
+            return;
+          }
+
           const landmarks = currentLandmarks();
           if (!landmarks.has(landmarkRole)) {
             landmarks.set(landmarkRole, []);

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

@@ -22,6 +22,9 @@ ruleTester.run('template-no-duplicate-landmark-elements', rule, {
     '<template><nav></nav><dialog><nav></nav></dialog></template>',
     // Dynamic role values — can't determine role statically
     '<template><div role={{this.role}}></div><div role={{this.role}}></div></template>',
+    // Dynamic aria-label on one landmark — can't infer whether it duplicates a sibling
+    '<template><form></form><form aria-label={{this.formLabel}}></form></template>',
+    '<template><nav></nav><nav aria-label={{this.navLabel}}></nav></template>',
   ],
 
   invalid: [
@@ -80,6 +83,9 @@ hbsRuleTester.run('template-no-duplicate-landmark-elements (hbs)', rule, {
     // Dynamic aria-label values are treated as unique (can't statically determine duplicates)
     '<nav aria-label={{siteNavigation}}></nav><nav aria-label={{siteNavigation}}></nav>',
     '<nav aria-label="primary navigation"></nav><nav aria-label={{this.something}}></nav>',
+    // Dynamic aria-label on one landmark sibling of an unlabeled landmark — can't infer duplication
+    '<form></form><form aria-label={{this.formLabel}}></form>',
+    '<nav></nav><nav aria-label={{this.navLabel}}></nav>',
     // header/footer inside sectioning elements lose their landmark role
     "<main><header><h1>Main Page Header</h1></header><button commandfor='my-dialog'>Open Dialog</button></main><dialog id='my-dialog'><header><h1>Dialog Header</h1></header></dialog>",
     "<main><header><h1>Main Page Header</h1></header><button commandfor='my-dialog'>Open Dialog</button></main><div popover id='my-dialog'><header><h1>Dialog Header</h1></header></div>",