[Rule Request]: Prohibiting use of aria-hidden and role='presentation' on focusable elements.

docs/rules/no-aria-hidden-on-focusable.md

@@ -0,0 +1,77 @@
+# no-aria-hidden-on-focusbable
+
+Enforce that `aria-hidden="true"` is not set on focusable elements or parent of focusable elements.
+
+`aria-hidden="true"` can be used to hide purely decorative content from screen reader users. An element with `aria-hidden="true"` that can also be reached by keyboard can lead to confusion or unexpected behavior for screen reader users. Avoid using `aria-hidden="true"` on focusable elements.
+
+ See more in [WAI-ARIA Use in HTML](https://www.w3.org/TR/using-aria/#fourth).
+
+
+### ✔ Succeed
+```vue
+<template>
+    <button>Press Me</button>
+</template>
+```
+
+```vue
+<template>
+    <div aria-hidden='true'><button tabindex='-1'>Submit</button></div>
+</template>
+```
+
+
+```vue
+<template>
+    <div aria-hidden='true'><span>Some text</div></div>
+</template>
+```
+
+```vue
+<template>
+    <button tabindex='-1' aria-hidden='true'>Press</button>
+</template>
+```
+
+```vue
+<template>
+    <div aria-hidden='true'><a href='#' tabindex='-1'>Link</a></div>
+</template>
+```
+
+```vue
+<template>
+    <div aria-hidden='true'><span>Some text</div></div>
+</template>
+```
+
+### ❌ Fail
+
+```vue
+<template>
+  <button aria-hidden='true'>press me</button>
+</template>
+```
+
+```vue
+<template>
+    <button aria-hidden="true">press me</button>
+</template>
+```
+```vue
+<template>
+    <a href="#" aria-hidden='true'>press me</a>
+</template>
+```
+```vue
+<template>
+    <div aria-hidden="true"> 
+        <button>press me</button>
+    </div>
+</template>
+```
+```vue
+<template>
+    <span tabindex='0' aria-hidden='true'><em>Icon</em></span>
+</template>
+```

docs/rules/no-role-presentation-on-focusable.md

@@ -0,0 +1,77 @@
+# no-role-presentaion-on-focusbable
+
+Enforce that `role="presentation"` is not set on focusable elements or parent of focusbale elements.
+
+`role="presentation` can be used to hide purely decorative content from screen reader users. An element with `role="presentation"` that can also be reached by keyboard can lead to confusion or unexpected behavior for screen reader users. Avoid using `role="presentation"` on focusable elements.
+
+ See more in [WAI-ARIA Use in HTML](https://www.w3.org/TR/using-aria/#fourth).
+
+
+### ✔ Succeed
+```vue
+<template>
+    <button>Press Me</button>
+</template>
+```
+
+```vue
+<template>
+    <div role="presentation"><button tabindex='-1'>Submit</button></div>
+</template>
+```
+
+
+```vue
+<template>
+    <div role="presentation"><span>Some text</div></div>
+</template>
+```
+
+```vue
+<template>
+    <button tabindex='-1' role="presentation">Press</button>
+</template>
+```
+
+```vue
+<template>
+    <div role="presentation"><a href='#' tabindex='-1'>Link</a></div>
+</template>
+```
+
+```vue
+<template>
+    <div role="presentation"><span>Some text</div></div>
+</template>
+```
+
+### ❌ Fail
+
+```vue
+<template>
+  <button role="presentation">press me</button>
+</template>
+```
+
+```vue
+<template>
+    <button role="presentation">press me</button>
+</template>
+```
+```vue
+<template>
+    <a href="#" role="presentation">press me</a>
+</template>
+```
+```vue
+<template>
+    <div role="presentation"> 
+        <button>press me</button>
+    </div>
+</template>
+```
+```vue
+<template>
+    <span tabindex='0' role="presentation"><em>Icon</em></span>
+</template>
+```

src/rules/__tests__/no-aria-hidden-on-focusable.test.ts

@@ -0,0 +1,31 @@
+import rule from '../no-aria-hidden-on-focusable';
+import makeRuleTester from "./makeRuleTester";
+
+makeRuleTester('no-presentation-role-or-aria-hidden-on-focusable', rule, {
+    valid: [
+        "<button>Submit</button>",
+        "<div aria-hidden='true'><button tabindex='-1'>Some text</button></div>",
+        "<div><button>Submit</button></div>",
+        "<a href='#' tabindex='-1'>link</a>",
+        "<button tabindex='-1' aria-hidden='true'>Press</button>",
+        "<div aria-hidden='true'><a href='#' tabindex='-1'>Link</a></div>"
+    ],
+    invalid: [
+        {
+            code: "<div aria-hidden='true'><button>Submit</button></div>",
+            errors: [{messageId: "default"}]
+        },
+        {
+            code: "<button type='button' aria-hidden='true'>Submit</button>",
+            errors: [{messageId: "default"}]
+        },
+        {
+            code: "<a href='#' aria-hidden='true'>Link</a>",
+            errors: [{messageId: "default"}]
+        },
+        {
+            code: "<span tabindex='0' aria-hidden='true'><em>Icon</em></span>",
+            errors: [{messageId: "default"}]
+        }
+    ]
+})

src/rules/__tests__/no-role-presentation-on-focusable.test.ts

@@ -0,0 +1,31 @@
+import rule from '../no-role-presentation-on-focusable';
+import makeRuleTester from "./makeRuleTester";
+
+makeRuleTester('no-role-presentation-role-on-focusable', rule, {
+    valid: [
+        "<button>Submit</button>",
+        "<div role='presentation'><button tabindex='-1'>Some text</button></div>",
+        "<div><button>Submit</button></div>",
+        "<a href='#' tabindex='-1'>link</a>",
+        "<button tabindex='-1' role='presentation'>Press</button>",
+        "<div role='presentation'><a href='#' tabindex='-1'>Link</a></div>"
+    ],
+    invalid: [
+        {
+            code: "<div role='presentation'><button>Submit</button></div>",
+            errors: [{messageId: "default"}]
+        },
+        {
+            code: "<button type='button' role='presentation'>Submit</button>",
+            errors: [{messageId: "default"}]
+        },
+        {
+            code: "<a href='#' role='presentation'>Link</a>",
+            errors: [{messageId: "default"}]
+        },
+        {
+            code: "<span tabindex='0' role='presentation'><em>Icon</em></span>",
+            errors: [{messageId: "default"}]
+        }
+    ]
+})

src/rules/no-aria-hidden-on-focusable.ts

@@ -0,0 +1,34 @@
+import type { Rule } from "eslint";
+
+import { defineTemplateBodyVisitor, getElementAttributeValue, makeDocsURL } from "../utils";
+import hasFocusableElements from "../utils/hasFocusableElement";
+
+const rule: Rule.RuleModule = {
+    meta: {
+        type: "problem",
+        docs: {
+            url: makeDocsURL("no-aria-hidden-on-focusable")
+        },
+        messages: {
+            default: "Focusable/Interactive elements must not have an aria-hidden attribute."
+        },
+        schema: []
+    },
+    create(context) {
+        return defineTemplateBodyVisitor(context, {
+            VElement(node) {
+                const hasAriaHidden = getElementAttributeValue(node, 'aria-hidden');
+                if (hasAriaHidden) {
+                    if (hasFocusableElements(node)) {
+                        context.report({
+                            node: node as any,
+                            messageId: 'default',
+                        });
+                    }
+                }
+            },
+        });
+    }
+}
+
+export default rule;

src/rules/no-role-presentation-on-focusable.ts

@@ -0,0 +1,35 @@
+import type { Rule } from "eslint";
+// import type { AST } from "vue-eslint-parser";
+
+import { defineTemplateBodyVisitor, getElementAttributeValue, makeDocsURL } from "../utils";
+import hasFocusableElements from "../utils/hasFocusableElement";
+
+const rule: Rule.RuleModule = {
+    meta: {
+        type: "problem",
+        docs: {
+            url: makeDocsURL("no-role-presentation-on-focusable")
+        },
+        messages: {
+            default: "Focusable/Interactive elements must not have a presentation role attribute."
+        },
+        schema: []
+    },
+    create(context) {
+        return defineTemplateBodyVisitor(context, {
+            VElement(node) {
+                const hasRolePresentation = getElementAttributeValue(node, 'role') === 'presentation';
+                if (hasRolePresentation) {
+                    if (hasFocusableElements(node)) {
+                        context.report({
+                            node: node as any,
+                            messageId: 'default',
+                        });
+                    }
+                }
+            },
+        });
+    }
+}
+
+export default rule;

src/utils.ts

@@ -9,6 +9,7 @@ export { default as getInteractiveRoles } from "./utils/getInteractiveRoles";
 export { default as hasAccessibleChild } from "./utils/hasAccessibleChild";
 export { default as hasAriaLabel } from "./utils/hasAriaLabel";
 export { default as hasContent } from "./utils/hasContent";
+export { default as hasFocusableElement } from "./utils/hasFocusableElement";
 export { default as hasOnDirective } from "./utils/hasOnDirective";
 export { default as hasOnDirectives } from "./utils/hasOnDirectives";
 export { default as interactiveHandlers } from "./utils/interactiveHandlers.json";

src/utils/hasFocusableElement.ts

@@ -0,0 +1,19 @@
+import type { AST } from 'vue-eslint-parser';
+import getElementAttributeValue from './getElementAttributeValue';
+import isInteractiveElement from './isInteractiveElement';
+
+function hasFocusableElements(node: AST.VElement):boolean {
+    const tabindex = getElementAttributeValue(node, 'tabindex');
+
+    if(isInteractiveElement(node)) {
+        return tabindex !== '-1';
+    }
+
+    if(tabindex !== null && tabindex !== '-1') {
+        return true;
+    }
+
+    return node.children.some(child => child.type === 'VElement' && hasFocusableElements(child))
+}
+
+export default hasFocusableElements;