Added rule for prohibiting use of aria-hidden and role=presentaion on focusable elements

Author: mauryapari

docs/rules/no-presentation-role-or-aria-hidden-on-focusable.md

@@ -0,0 +1,68 @@
+# no-presentaion-or-aria-hidden-on-focusbable
+
+Elements cannot use role='presentation' or aria-hidden='true' on focusable element. Using either of these on a focusable element or parent of a focusbale element will result in some users focusing on 'nothing'. 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><button>Submit</button></div>
+</template>
+```
+
+
+```vue
+<template>
+    <div aria-hidden='true'><span>Some text</div></div>
+</template>
+```
+
+```vue
+<template>
+    <button tabindex='-1' aria-hidden='true' role='presentation'>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 role=presentation>press me</button>
+</template>
+```
+
+```vue
+<template>
+    <button aria-hidden="true">press me</button>
+</template>
+```
+```vue
+<template>
+    <a href="#" role='presentation'>press me</a>
+</template>
+```
+```vue
+<template>
+    <div aria-hidden="true"> 
+        <button>press me</button>
+    </div>
+</template>
+```

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

@@ -0,0 +1,35 @@
+import rule from '../no-presentation-role-or-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'><span>Some text</div></div>",
+        "<div><button>Submit</button></div>",
+        "<a href='#'>link</a>",
+        "<button tabindex='-1' aria-hidden='true' role='presentation'>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' role='presentation'>Submit</button>",
+            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' role='presentation'><em>Icon</em></span>",
+            errors: [{messageId: "default"}]
+        }
+    ]
+})

src/rules/no-presentation-role-or-aria-hidden-on-focusable.ts

@@ -0,0 +1,55 @@
+import type { Rule } from "eslint";
+import type { AST } from "vue-eslint-parser";
+
+import { defineTemplateBodyVisitor, getElementAttributeValue, makeDocsURL } from "../utils";
+
+const focusableElements = [
+    'button',
+    'a',
+    'input',
+    'select',
+    'textarea',
+    '[tabindex]',
+    '[contenteditable]'
+];
+
+const hasFocusableElements = (element: AST.VElement): boolean => {
+    if (focusableElements.includes(element.name) || element.startTag.attributes.some(attr => focusableElements.includes(`[${attr.key.name}]`))) {
+        if(getElementAttributeValue(element, 'tabindex') === '-1') {
+            return false;
+        }
+        return true;
+    }
+    return element.children.some(child => child.type === `VElement` && hasFocusableElements(child));
+};
+
+const rule: Rule.RuleModule = {
+    meta: {
+        type: "problem",
+        docs: {
+            url: makeDocsURL("no-presentation-or-aria-hidden-on-focusable")
+        },
+        messages: {
+            default: "Focusable/Interactive elements must not have a presentation role or aria-hidden attribute."
+        },
+        schema: []
+    },
+    create(context) {
+        return defineTemplateBodyVisitor(context, {
+            VElement(node) {
+                const hasAriaHidden = getElementAttributeValue(node, 'aria-hidden');
+                const hasRolePresentation = getElementAttributeValue(node, 'role') === 'presentation';
+                if (hasAriaHidden || hasRolePresentation) {
+                    if (hasFocusableElements(node)) {
+                        context.report({
+                            node: node as any,
+                            messageId: 'default',
+                        });
+                    }
+                }
+            },
+        });
+    }
+}
+
+export default rule;