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 <contact@florian-lefebvre.dev>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

.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>
+```

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>

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;
 		},