fix: handle template expression in no-invalid-role (#335)

* fix: handle template expression in no-invalid-role

* Update no-invalid-role.js

Author: yeonjuan

packages/eslint-plugin/lib/rules/no-invalid-role.js

@@ -2,6 +2,7 @@
  * @typedef { import("../types").RuleModule<[]> } RuleModule
  */
 
+const { NodeTypes } = require("es-html-parser");
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
 const { createVisitors } = require("./utils/visitors");
@@ -252,6 +253,17 @@ module.exports = {
         if (!role) {
           return;
         }
+        /**
+         * Allow template expression.
+         * ex: html`<div role=${role}></div>`
+         */
+        if (
+          role.value &&
+          role.value.parts.some((part) => part.type === NodeTypes.Template)
+        ) {
+          return;
+        }
+
         const roleValue = (
           (role.value && role.value.value) ||
           ""

packages/eslint-plugin/tests/rules/no-invalid-role.test.js

@@ -49,6 +49,11 @@ templateRuleTester.run("[template] no-invalid-role", rule, {
     {
       code: 'html`<div role="grid"></div>`',
     },
+    {
+      code: `
+const role = "grid";
+html\`<div role="\${role}"></div>\``,
+    },
   ],
   invalid: [
     {