From b21b3ba307235510707ee9f5bd49f71473a07004 Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Tue, 9 Apr 2024 12:36:48 +0100 Subject: [PATCH] fix(devtool): do not trigger interaction check for `div` and `span` (#10719) * fix(devtool): do not trigger interaction check for `div` and `span` * add test * add tests * Rephrase changeset * remove log * add reference link * Update .changeset/swift-coats-teach.md Co-authored-by: Florian Lefebvre --------- Co-authored-by: Florian Lefebvre --- .changeset/swift-coats-teach.md | 12 ++++++++++++ .../dev-toolbar/src/pages/a11y-exceptions.astro | 2 ++ .../client/dev-toolbar/apps/audit/rules/a11y.ts | 6 ++++++ 3 files changed, 20 insertions(+) create mode 100644 .changeset/swift-coats-teach.md diff --git a/.changeset/swift-coats-teach.md b/.changeset/swift-coats-teach.md new file mode 100644 index 0000000000..52d7836a91 --- /dev/null +++ b/.changeset/swift-coats-teach.md @@ -0,0 +1,12 @@ +--- +"astro": patch +--- + +Fixes a false positive for `div` and `span` elements when running the Dev Toolbar accessibility audits. + +Those are special elements that don't have an interaction assigned by default. Instead, it is assigned through the `role` attribute. This means that cases like the following are now deemed correct: + +```html +
+ +``` diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-exceptions.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-exceptions.astro index 0da2c272d3..9aa8166dba 100644 --- a/packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-exceptions.astro +++ b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-exceptions.astro @@ -4,3 +4,5 @@ +
+ diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts index ca5fa298e4..27da9b011e 100644 --- a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts @@ -107,6 +107,10 @@ const aria_non_interactive_roles = [ 'tooltip', ]; +// These elements aren't interactive and aren't non-interactive. Their interaction changes based on the role assigned to them +// https://www.w3.org/TR/html-aria/#docconformance -> look at the table, specification for the `div` and `span` elements. +const roleless_elements = ['div', 'span']; + const a11y_required_content = [ // anchor-has-content 'a', @@ -467,6 +471,7 @@ export const a11y: AuditRuleWithSelector[] = [ const role = element.getAttribute('role'); if (!role) return false; if (!ariaRoles.has(role)) return false; + if (roleless_elements.includes(element.localName)) return false; if (aria_non_interactive_roles.includes(role)) return true; }, @@ -487,6 +492,7 @@ export const a11y: AuditRuleWithSelector[] = [ element.localName as keyof typeof a11y_non_interactive_element_to_interactive_role_exceptions ]; if (exceptions?.includes(role)) return false; + if (roleless_elements.includes(element.localName)) return false; if (!aria_non_interactive_roles.includes(role)) return true; },