From 08aa48a734bc8f2f0a6119b6dcf63d6a48e34f88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?= <114920418+rcj-siteimprove@users.noreply.github.com> Date: Wed, 20 Dec 2023 11:49:03 +0100 Subject: [PATCH 1/4] Add updated predicate for checking allowed attributes for input types --- packages/alfa-rules/src/sia-r18/rule.ts | 39 ++++++++++---- .../alfa-rules/test/sia-r18/rule.spec.tsx | 52 +++++++++++++++++++ 2 files changed, 80 insertions(+), 11 deletions(-) diff --git a/packages/alfa-rules/src/sia-r18/rule.ts b/packages/alfa-rules/src/sia-r18/rule.ts index 72e5e275c2..2e48d3056f 100644 --- a/packages/alfa-rules/src/sia-r18/rule.ts +++ b/packages/alfa-rules/src/sia-r18/rule.ts @@ -70,6 +70,33 @@ export default Rule.Atomic.of({ }, }); +function allowedForInputType( + attributeName: aria.Attribute.Name, +): Predicate { + return hasInputType((inputType) => { + switch (inputType) { + case "color": + return attributeName === "aria-disabled"; + case "date": + case "datetime-local": + case "email": + case "month": + case "password": + case "time": + case "week": + return Role.of("textbox").isAttributeSupported(attributeName); + case "file": + return ( + attributeName === "aria-disabled" || + attributeName === "aria-invalid" || + attributeName === "aria-required" + ); + default: + return false; + } + }); +} + function ariaHtmlAllowed(target: Attribute): boolean { const attributeName = target.name as aria.Attribute.Name; for (const element of target.owner) { @@ -78,17 +105,7 @@ function ariaHtmlAllowed(target: Attribute): boolean { return Role.of("document").isAttributeSupported(attributeName); case "input": - return ( - hasInputType( - "date", - "datetime-local", - "email", - "month", - "password", - "time", - "week", - )(element) && Role.of("textbox").isAttributeSupported(attributeName) - ); + return allowedForInputType(attributeName)(element); case "select": return ( diff --git a/packages/alfa-rules/test/sia-r18/rule.spec.tsx b/packages/alfa-rules/test/sia-r18/rule.spec.tsx index 9b64b56da4..6f90497fe0 100644 --- a/packages/alfa-rules/test/sia-r18/rule.spec.tsx +++ b/packages/alfa-rules/test/sia-r18/rule.spec.tsx @@ -23,6 +23,58 @@ test(`evaluate() passes input with type password field and aria-required state`, ]); }); +test(`evaluate() passes input with type file field and aria-disabled state`, async (t) => { + const target = ; + + const document = h.document([target]); + + t.deepEqual(await evaluate(R18, { document }), [ + passed(R18, target.attribute("aria-disabled").getUnsafe(), { + 1: Outcomes.IsAllowed, + 2: Outcomes.IsNotProhibited, + }), + ]); +}); + +test(`evaluate() passes input with type file field and aria-invalid state`, async (t) => { + const target = ; + + const document = h.document([target]); + + t.deepEqual(await evaluate(R18, { document }), [ + passed(R18, target.attribute("aria-invalid").getUnsafe(), { + 1: Outcomes.IsAllowed, + 2: Outcomes.IsNotProhibited, + }), + ]); +}); + +test(`evaluate() passes input with type file field and aria-required state`, async (t) => { + const target = ; + + const document = h.document([target]); + + t.deepEqual(await evaluate(R18, { document }), [ + passed(R18, target.attribute("aria-required").getUnsafe(), { + 1: Outcomes.IsAllowed, + 2: Outcomes.IsNotProhibited, + }), + ]); +}); + +test(`evaluate() passes input with type color field and aria-disabled state`, async (t) => { + const target = ; + + const document = h.document([target]); + + t.deepEqual(await evaluate(R18, { document }), [ + passed(R18, target.attribute("aria-disabled").getUnsafe(), { + 1: Outcomes.IsAllowed, + 2: Outcomes.IsNotProhibited, + }), + ]); +}); + test(`evaluate() passes a button with aria-pressed state`, async (t) => { const target = ; From f91e8026f5dbc71fd726095d21ad5f3f2459d0d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?= <114920418+rcj-siteimprove@users.noreply.github.com> Date: Wed, 20 Dec 2023 11:49:39 +0100 Subject: [PATCH 2/4] Add comment about change to input type=email --- packages/alfa-aria/src/feature.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/alfa-aria/src/feature.ts b/packages/alfa-aria/src/feature.ts index 9d1d5a1f43..82800ee525 100644 --- a/packages/alfa-aria/src/feature.ts +++ b/packages/alfa-aria/src/feature.ts @@ -399,6 +399,7 @@ const Features: Features = { return element.attribute("list").isSome() ? "combobox" : "searchbox"; + // Note: The specification for email has changed, it now has role textbox. We should look into this if it becomes an issue. case "email": case "tel": case "text": From 1c18d9f0f882f171707270176f4be18f39bbeed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?= <114920418+rcj-siteimprove@users.noreply.github.com> Date: Wed, 20 Dec 2023 13:12:55 +0100 Subject: [PATCH 3/4] Add changeset --- .changeset/violet-coats-tie.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/violet-coats-tie.md diff --git a/.changeset/violet-coats-tie.md b/.changeset/violet-coats-tie.md new file mode 100644 index 0000000000..1cca7d3f4f --- /dev/null +++ b/.changeset/violet-coats-tie.md @@ -0,0 +1,5 @@ +--- +"@siteimprove/alfa-rules": minor +--- + +**Fixed:** SIA-R18 now accepts attributes for `input type=file` and `input type=color` according to the [ARIA in HTML](https://w3c.github.io/html-aria/#el-input-file) specification From ddae15530d34ebeccc07a671c3e0f8431b1abd66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?= <114920418+rcj-siteimprove@users.noreply.github.com> Date: Wed, 20 Dec 2023 13:58:34 +0100 Subject: [PATCH 4/4] Update .changeset/violet-coats-tie.md Co-authored-by: Jean-Yves Moyen --- .changeset/violet-coats-tie.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/violet-coats-tie.md b/.changeset/violet-coats-tie.md index 1cca7d3f4f..96b19c0352 100644 --- a/.changeset/violet-coats-tie.md +++ b/.changeset/violet-coats-tie.md @@ -1,5 +1,5 @@ --- -"@siteimprove/alfa-rules": minor +"@siteimprove/alfa-rules": patch --- **Fixed:** SIA-R18 now accepts attributes for `input type=file` and `input type=color` according to the [ARIA in HTML](https://w3c.github.io/html-aria/#el-input-file) specification