@dialpad/eslint-plugin-dialtone 1.12.0-next.2 → 1.12.0-next.3

package/lib/rules/focusgroup-requires-label.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Warns when v-dt-focusgroup is used without an accessible label on the same element.
+ * @author Dialtone
+ */
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Warns when v-dt-focusgroup is used on an element without aria-label or aria-labelledby. ' +
+        'Screen readers need an accessible name to identify the widget.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/focusgroup-requires-label.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingLabel:
+        'v-dt-focusgroup requires an accessible name via "aria-label" or "aria-labelledby" ' +
+        'so screen readers can identify the widget.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (!node.directive) return;
+        if (node.key.name.name !== 'dt-focusgroup') return;
+
+        const element = node.parent;
+        const hasLabel = element.attributes.some(
+          attr =>
+            (!attr.directive && (
+              attr.key.name === 'aria-label' ||
+              attr.key.name === 'aria-labelledby'
+            )) ||
+            (attr.directive && attr.key.name.name === 'bind' && (
+              attr.key.argument?.name === 'aria-label' ||
+              attr.key.argument?.name === 'aria-labelledby'
+            )),
+        );
+
+        if (!hasLabel) {
+          context.report({ node, messageId: 'missingLabel' });
+        }
+      },
+    });
+  },
+};

package/lib/rules/focusgroup-requires-role.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview Warns when v-dt-focusgroup is used without a role attribute on the same element.
+ * @author Dialtone
+ */
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Warns when v-dt-focusgroup is used on an element without a role attribute. ' +
+        'Screen readers need a role to announce the widget correctly.',
+      recommended: false,
+      url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/focusgroup-requires-role.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingRole:
+        'v-dt-focusgroup requires a "role" attribute (e.g. toolbar, tablist, listbox, radiogroup, menu) ' +
+        'so screen readers can announce the widget correctly.',
+    },
+  },
+
+  create (context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+    return sourceCode.parserServices.defineTemplateBodyVisitor({
+      VAttribute (node) {
+        if (!node.directive) return;
+        if (node.key.name.name !== 'dt-focusgroup') return;
+
+        const element = node.parent;
+        const hasRole = element.attributes.some(
+          attr =>
+            (!attr.directive && attr.key.name === 'role') ||
+            (attr.directive && attr.key.name.name === 'bind' && attr.key.argument?.name === 'role'),
+        );
+
+        if (!hasRole) {
+          context.report({ node, messageId: 'missingRole' });
+        }
+      },
+    });
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/eslint-plugin-dialtone",
-  "version": "1.12.0-next.2",
+  "version": "1.12.0-next.3",
   "description": "dialtone eslint plugin",
   "keywords": [
     "Dialpad",