fix(eslint-plugin-lit-a11y): add missing valid role check in `role-su…

…pports-aria-attr` rule (#2467) * fix(eslint-plugin-lit-a11y): add missing valid role check in role-supports-aria-attr rule * chore: generate changeset * test(lit-a11y-roles-rule): add regression test for #2466
open-wc · Jul 19, 2022 · c7997ff · c7997ff
1 parent 07b4f0b
commit c7997ff
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 24 deletions.
diff --git a/.changeset/thin-onions-run.md b/.changeset/thin-onions-run.md
@@ -0,0 +1,5 @@
+---
+'eslint-plugin-lit-a11y': patch
+---
+
+Fix bug #2466 issue in role-supports-aria-attr
diff --git a/packages/eslint-plugin-lit-a11y/lib/rules/role-supports-aria-attr.js b/packages/eslint-plugin-lit-a11y/lib/rules/role-supports-aria-attr.js
@@ -6,7 +6,7 @@
 const ruleExtender = require('eslint-rule-extender');
 const { roles, aria } = require('aria-query');
 const { TemplateAnalyzer } = require('eslint-plugin-lit/lib/template-analyzer.js');
-const { isAriaPropertyName } = require('../utils/aria.js');
+const { isAriaPropertyName, isAriaRole } = require('../utils/aria.js');
 const { isHtmlTaggedTemplate } = require('../utils/isLitHtmlTemplate.js');
 const { HasLitHtmlImportRuleExtension } = require('../utils/HasLitHtmlImportRuleExtension.js');
 
@@ -41,32 +41,38 @@ const RoleSupportsAriaAttrRule = {
               if (Object.keys(element.attribs).includes('role')) {
                 /** @type {element['attribs'] & { role?: import("aria-query").ARIARole }} */
                 const { role } = element.attribs;
-                if (role.startsWith('{{')) return; // role is interpolated, assume its OK
-                const { props: propKeyValues } = roles.get(role);
-                const propertySet = Object.keys(propKeyValues);
-                const invalidAriaPropsForRole = [...aria.keys()].filter(
-                  attribute => propertySet.indexOf(attribute) === -1,
-                );
+                // if the role is a valid/existing role
+                if (isAriaRole(role)) {
+                  if (role.startsWith('{{')) return; // role is interpolated, assume its OK
+                  const { props: propKeyValues } = roles.get(role);
+                  const propertySet = Object.keys(propKeyValues);
+                  const invalidAriaPropsForRole = [...aria.keys()].filter(
+                    attribute => propertySet.indexOf(attribute) === -1,
+                  );
 
-                Object.keys(element.attribs)
-                  .filter(isAriaPropertyName)
-                  .forEach(attr => {
-                    if (invalidAriaPropsForRole.includes(attr)) {
-                      const loc =
-                        analyzer.getLocationForAttribute(element, attr, context.getSourceCode()) ??
-                        node.loc;
-                      if (loc) {
-                        context.report({
-                          loc,
-                          message: `The "{{role}}" role must not be used with the "${attr}" attribute.'`,
-                          data: {
-                            role,
+                  Object.keys(element.attribs)
+                    .filter(isAriaPropertyName)
+                    .forEach(attr => {
+                      if (invalidAriaPropsForRole.includes(attr)) {
+                        const loc =
+                          analyzer.getLocationForAttribute(
+                            element,
                             attr,
-                          },
-                        });
+                            context.getSourceCode(),
+                          ) ?? node.loc;
+                        if (loc) {
+                          context.report({
+                            loc,
+                            message: `The "{{role}}" role must not be used with the "${attr}" attribute.'`,
+                            data: {
+                              role,
+                              attr,
+                            },
+                          });
+                        }
                       }
-                    }
-                  });
+                    });
+                }
               }
             },
           });

diff --git a/packages/eslint-plugin-lit-a11y/tests/lib/rules/role-supports-aria-attr.js b/packages/eslint-plugin-lit-a11y/tests/lib/rules/role-supports-aria-attr.js
@@ -27,6 +27,7 @@ ruleTester.run('role-supports-aria-attr', rule, {
     { code: "html`<div class='${classMap(calendarClasses)}' role='${ifDefined(role)}'>`" },
     { code: "html`<div role='checkbox' aria-checked='true'></div>`" },
     { code: "html`<div role='presentation'></div>`" },
+    { code: "html`<div role='pizza'>:pizza:</div>`" }, // should not throw exception see: [#2466](https://github.com/open-wc/open-wc/issues/2466)
   ],
 
   invalid: [