fix vue-a11y#932 not required switch prop

JoCa96 · Mar 25, 2024 · 8605261 · 8605261
1 parent 4c44d19
commit 8605261
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/src/rules/__tests__/role-has-required-aria-props.test.ts b/src/rules/__tests__/role-has-required-aria-props.test.ts
@@ -3,11 +3,21 @@ import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("role-has-required-aria-props", rule, {
   valid: [
+    "<input role='switch' type='checkbox' aria-labelledby='test' />",
     "<span role='checkbox' aria-checked='false' aria-labelledby='test' tabindex='0' />",
     "<span :role='role' aria-checked='false' aria-labelledby='test' tabindex='0' />",
     "<span :role='role' />"
   ],
   invalid: [
+    {
+      code: "<input role='switch' aria-labelledby='test' />",
+      errors: [
+        {
+          messageId: "default",
+          data: { role: "switch", attributes: "aria-checked" }
+        }
+      ]
+    },
     {
       code: "<span role='checkbox' aria-labelledby='test' tabindex='0' />",
       errors: [

diff --git a/src/rules/role-has-required-aria-props.ts b/src/rules/role-has-required-aria-props.ts
@@ -18,6 +18,24 @@ function isAriaRoleDefinitionKey(role: any): role is ARIARoleDefinitionKey {
   return roles.has(role);
 }
 
+function filterRequiredPropsExceptions(
+  node: AST.VElement,
+  role: ARIARoleDefinitionKey,
+  elementType: string,
+  requiredProps: string[]
+) {
+  // Based on the pattern recommendation in https://www.w3.org/WAI/ARIA/apg/patterns/switch/#wai-ariaroles,states,andproperties
+  // "aria-checked" should not be required.
+  if (
+    role.toLowerCase() === "switch" &&
+    elementType === "input" &&
+    getElementAttributeValue(node, "type") === "checkbox"
+  ) {
+    return requiredProps.filter((p) => p !== "aria-checked");
+  }
+  return requiredProps;
+}
+
 const rule: Rule.RuleModule = {
   meta: {
     type: "problem",
@@ -48,7 +66,12 @@ const rule: Rule.RuleModule = {
           .forEach((role) => {
             if (isAriaRoleDefinitionKey(role)) {
               const roleDefinition = roles.get(role) as any;
-              const requiredProps = Object.keys(roleDefinition.requiredProps);
+              const requiredProps = filterRequiredPropsExceptions(
+                node,
+                role,
+                elementType,
+                Object.keys(roleDefinition.requiredProps)
+              );
 
               if (requiredProps && !hasAttributes(node, requiredProps)) {
                 context.report({