diff --git a/src/rules/__tests__/role-has-required-aria-props.test.ts b/src/rules/__tests__/role-has-required-aria-props.test.ts index bec5936c..401fc1cc 100644 --- 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: [ + "", "", "", "" ], invalid: [ + { + code: "", + errors: [ + { + messageId: "default", + data: { role: "switch", attributes: "aria-checked" } + } + ] + }, { code: "", errors: [ diff --git a/src/rules/role-has-required-aria-props.ts b/src/rules/role-has-required-aria-props.ts index 9ff619be..d7526fba 100644 --- 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 when elementType is `input` and has the type attribute `checkbox`. + 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({