Skip to content

Commit 7395e00

Browse files
authored
fix role "switch" requiring "aria-checked" when used with native input element (#1071)
* fix #932 not required switch prop * extended comment Closes #932
1 parent d56bc42 commit 7395e00

File tree

2 files changed

+34
-1
lines changed

2 files changed

+34
-1
lines changed

Diff for: src/rules/__tests__/role-has-required-aria-props.test.ts

+10
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,21 @@ import makeRuleTester from "./makeRuleTester";
33

44
makeRuleTester("role-has-required-aria-props", rule, {
55
valid: [
6+
"<input role='switch' type='checkbox' aria-labelledby='test' />",
67
"<span role='checkbox' aria-checked='false' aria-labelledby='test' tabindex='0' />",
78
"<span :role='role' aria-checked='false' aria-labelledby='test' tabindex='0' />",
89
"<span :role='role' />"
910
],
1011
invalid: [
12+
{
13+
code: "<input role='switch' aria-labelledby='test' />",
14+
errors: [
15+
{
16+
messageId: "default",
17+
data: { role: "switch", attributes: "aria-checked" }
18+
}
19+
]
20+
},
1121
{
1222
code: "<span role='checkbox' aria-labelledby='test' tabindex='0' />",
1323
errors: [

Diff for: src/rules/role-has-required-aria-props.ts

+24-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,24 @@ function isAriaRoleDefinitionKey(role: any): role is ARIARoleDefinitionKey {
1818
return roles.has(role);
1919
}
2020

21+
function filterRequiredPropsExceptions(
22+
node: AST.VElement,
23+
role: ARIARoleDefinitionKey,
24+
elementType: string,
25+
requiredProps: string[]
26+
) {
27+
// Based on the pattern recommendation in https://www.w3.org/WAI/ARIA/apg/patterns/switch/#wai-ariaroles,states,andproperties
28+
// "aria-checked" should not be required when elementType is `input` and has the type attribute `checkbox`.
29+
if (
30+
role.toLowerCase() === "switch" &&
31+
elementType === "input" &&
32+
getElementAttributeValue(node, "type") === "checkbox"
33+
) {
34+
return requiredProps.filter((p) => p !== "aria-checked");
35+
}
36+
return requiredProps;
37+
}
38+
2139
const rule: Rule.RuleModule = {
2240
meta: {
2341
type: "problem",
@@ -48,7 +66,12 @@ const rule: Rule.RuleModule = {
4866
.forEach((role) => {
4967
if (isAriaRoleDefinitionKey(role)) {
5068
const roleDefinition = roles.get(role) as any;
51-
const requiredProps = Object.keys(roleDefinition.requiredProps);
69+
const requiredProps = filterRequiredPropsExceptions(
70+
node,
71+
role,
72+
elementType,
73+
Object.keys(roleDefinition.requiredProps)
74+
);
5275

5376
if (requiredProps && !hasAttributes(node, requiredProps)) {
5477
context.report({

0 commit comments

Comments
 (0)