fix(devtool): do not trigger interaction check for div and span (w…

…ithastro#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 <[email protected]> --------- Co-authored-by: Florian Lefebvre <[email protected]>
PeterDraex · Apr 23, 2024 · 945ad5c · 945ad5c
1 parent bc115f9
commit 945ad5c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/.changeset/swift-coats-teach.md 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
+<div role="tablist"></div>
+<span role="button" onclick="" onkeydown=""></span>
+```
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
@@ -4,3 +4,5 @@
 
 
 <input role="button" aria-label="Label"/>
+<div role="grid"></div>
+<span role="button" onclick="" onfocus=""></span>
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
@@ -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;
 		},
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,5 @@


		<input role="button" aria-label="Label"/>
		<div role="grid"></div>
		<span role="button" onclick="" onfocus=""></span>