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

.changeset/swift-coats-teach.md

@@ -0,0 +1,12 @@
+---
+"astro": patch
+---
+
+Fixes a false positive for the elements `div` and `span`. `div` and `span` are special elements that don't have an interaction assigned, instead it is assigned based on the role assigned via attributes.
+
+This means that cases like the following are deemed correct by the a11y audits:
+
+```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,9 @@ 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
+const roleless_elements = ['div', 'span'];
+
 const a11y_required_content = [
 	// anchor-has-content
 	'a',
@@ -467,6 +470,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 +491,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;
 		},