Merge pull request #2498 from johanrd/fix/2475

Post-merge review of #2475 (`template-no-invalid-role`)

Author: NullVoxPopuli

lib/rules/template-no-invalid-role.js

@@ -4,10 +4,13 @@ const VALID_ROLES = new Set([
   'application',
   'article',
   'associationlist',
+  'associationlistitemkey',
+  'associationlistitemvalue',
   'banner',
   'blockquote',
   'button',
   'caption',
+  'cell',
   'checkbox',
   'code',
   'columnheader',
@@ -87,16 +90,18 @@ const VALID_ROLES = new Set([
 ]);
 
 // Elements with semantic meaning that should not be given role="presentation" or role="none"
+// List from https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 const SEMANTIC_ELEMENTS = new Set([
   'a',
   'abbr',
-  'address',
-  'article',
-  'aside',
+  'applet',
+  'area',
+  'audio',
   'b',
   'bdi',
   'bdo',
   'blockquote',
+  'br',
   'button',
   'caption',
   'cite',
@@ -110,50 +115,50 @@ const SEMANTIC_ELEMENTS = new Set([
   'details',
   'dfn',
   'dialog',
+  'dir',
   'dl',
   'dt',
   'em',
+  'embed',
   'fieldset',
   'figcaption',
   'figure',
-  'footer',
   'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hgroup',
   'hr',
   'i',
+  'iframe',
   'input',
   'ins',
   'kbd',
   'label',
   'legend',
   'main',
+  'map',
   'mark',
   'menu',
+  'menuitem',
   'meter',
-  'nav',
+  'noembed',
+  'object',
   'ol',
   'optgroup',
   'option',
   'output',
   'p',
+  'param',
   'pre',
   'progress',
   'q',
+  'rb',
   'rp',
   'rt',
+  'rtc',
   'ruby',
   's',
   'samp',
-  'section',
   'select',
   'small',
+  'source',
   'strong',
   'sub',
   'summary',
@@ -167,9 +172,13 @@ const SEMANTIC_ELEMENTS = new Set([
   'thead',
   'time',
   'tr',
+  'track',
+  'tt',
   'u',
   'ul',
   'var',
+  'video',
+  'wbr',
 ]);
 
 /** @type {import('eslint').Rule.RuleModule} */
@@ -221,8 +230,10 @@ module.exports = {
           return;
         }
 
+        const roleLower = role.toLowerCase();
+
         // Check for nonexistent roles
-        if (catchNonexistentRoles && !VALID_ROLES.has(role)) {
+        if (catchNonexistentRoles && !VALID_ROLES.has(roleLower)) {
           context.report({
             node: roleAttr,
             messageId: 'invalid',
@@ -231,8 +242,13 @@ module.exports = {
           return;
         }
 
-        // Check for presentation/none role on semantic elements
-        if ((role === 'presentation' || role === 'none') && SEMANTIC_ELEMENTS.has(node.tag)) {
+        // Check for presentation/none role on semantic elements (case-insensitive per WAI-ARIA 1.2:
+        // "Case-sensitivity of the comparison inherits from the case-sensitivity of the host language"
+        // and HTML is case-insensitive — https://www.w3.org/TR/wai-aria-1.2/#document-handling_author-errors_roles)
+        if (
+          (roleLower === 'presentation' || roleLower === 'none') &&
+          SEMANTIC_ELEMENTS.has(node.tag)
+        ) {
           context.report({
             node: roleAttr,
             messageId: 'presentationOnSemantic',

tests/lib/rules/template-no-invalid-role.js

@@ -56,6 +56,16 @@ ruleTester.run('template-no-invalid-role', rule, {
     '<template><AwesomeThing role="presentation"></AwesomeThing></template>',
     '<template><table role="textbox"></table></template>',
     '<template><div role="{{if this.inModal "dialog" "contentinfo" }}"></div></template>',
+
+    // Missing VALID_ROLES entries: associationlistitemkey, associationlistitemvalue, cell
+    '<template><div role="associationlistitemkey">Key</div></template>',
+    '<template><div role="associationlistitemvalue">Value</div></template>',
+    '<template><td role="cell">Data</td></template>',
+
+    // Case-insensitive role matching
+    '<template><div role="Button">Click</div></template>',
+    '<template><div role="NAVIGATION">Nav</div></template>',
+    '<template><div role="ALERT">Alert</div></template>',
   ],
 
   invalid: [
@@ -156,6 +166,32 @@ ruleTester.run('template-no-invalid-role', rule, {
       output: null,
       errors: [{ message: "Invalid ARIA role 'COMMAND INTERFACE'. Must be a valid ARIA role." }],
     },
+
+    // Newly added SEMANTIC_ELEMENTS: presentation/none on iframe, video, audio
+    {
+      code: '<template><iframe role="presentation"></iframe></template>',
+      output: null,
+      errors: [
+        { message: 'The role "presentation" should not be used on the semantic element <iframe>.' },
+      ],
+    },
+    {
+      code: '<template><video role="none"></video></template>',
+      output: null,
+      errors: [{ message: 'The role "none" should not be used on the semantic element <video>.' }],
+    },
+    {
+      code: '<template><audio role="presentation"></audio></template>',
+      output: null,
+      errors: [
+        { message: 'The role "presentation" should not be used on the semantic element <audio>.' },
+      ],
+    },
+    {
+      code: '<template><embed role="none"></template>',
+      output: null,
+      errors: [{ message: 'The role "none" should not be used on the semantic element <embed>.' }],
+    },
   ],
 });
 
@@ -187,6 +223,14 @@ hbsRuleTester.run('template-no-invalid-role', rule, {
     '<AwesomeThing role="presentation"></AwesomeThing>',
     '<table role="textbox"></table>',
     '<div role="{{if this.inModal "dialog" "contentinfo" }}"></div>',
+    // Missing VALID_ROLES entries: associationlistitemkey, associationlistitemvalue, cell
+    '<div role="associationlistitemkey">Key</div>',
+    '<div role="associationlistitemvalue">Value</div>',
+    '<td role="cell">Data</td>',
+    // Case-insensitive role matching
+    '<div role="Button">Click</div>',
+    '<div role="NAVIGATION">Nav</div>',
+    '<div role="ALERT">Alert</div>',
     // catchNonexistentRoles: false — non-existent roles are not flagged
     {
       code: '<div role="command interface"></div>',
@@ -260,5 +304,30 @@ hbsRuleTester.run('template-no-invalid-role', rule, {
       output: null,
       errors: [{ message: "Invalid ARIA role 'COMMAND INTERFACE'. Must be a valid ARIA role." }],
     },
+    // Newly added SEMANTIC_ELEMENTS: presentation/none on iframe, video, audio, embed
+    {
+      code: '<iframe role="presentation"></iframe>',
+      output: null,
+      errors: [
+        { message: 'The role "presentation" should not be used on the semantic element <iframe>.' },
+      ],
+    },
+    {
+      code: '<video role="none"></video>',
+      output: null,
+      errors: [{ message: 'The role "none" should not be used on the semantic element <video>.' }],
+    },
+    {
+      code: '<audio role="presentation"></audio>',
+      output: null,
+      errors: [
+        { message: 'The role "presentation" should not be used on the semantic element <audio>.' },
+      ],
+    },
+    {
+      code: '<embed role="none">',
+      output: null,
+      errors: [{ message: 'The role "none" should not be used on the semantic element <embed>.' }],
+    },
   ],
 });