Refactored code into seprate files and utility file

Author: mauryapari

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-presentation-role-or-aria-hidden-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>
+```

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

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

src/rules/__tests__/no-presentation-role-or-aria-hidden-on-focusable.test.ts renamed to src/rules/__tests__/no-aria-hidden-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/__tests__/no-role-presentation-on-focusable.test.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;