Fixes audit when multiple role values exist. (#9857)

* fix: Fixing the issue of errors caused by multiple values in the role, when multiple roles exist, check each role. fix #9856 * Update .changeset/eight-flowers-remain.md --------- Co-authored-by: Nate Moore <[email protected]>
withastro · Feb 13, 2024 · 73bd900 · 73bd900
1 parent 2168635
commit 73bd900
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/.changeset/eight-flowers-remain.md b/.changeset/eight-flowers-remain.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes false positives in the dev overlay audit when multiple `role` values exist.
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts
@@ -29,6 +29,8 @@ import { aria, roles } from 'aria-query';
 import { AXObjectRoles, elementAXObjects } from 'axobject-query';
 import type { AuditRuleWithSelector } from './index.js';
 
+const WHITESPACE_REGEX = /\s+/;
+
 const a11y_required_attributes = {
 	a: ['href'],
 	area: ['alt', 'aria-label', 'aria-labelledby'],
@@ -496,13 +498,17 @@ export const a11y: AuditRuleWithSelector[] = [
 			if (is_semantic_role_element(role, element.localName, getAttributeObject(element))) {
 				return;
 			}
-			const { requiredProps } = roles.get(role)!;
-			const required_role_props = Object.keys(requiredProps);
-			const missingProps = required_role_props.filter((prop) => !element.hasAttribute(prop));
-			if (missingProps.length > 0) {
-				(element as any).__astro_role = role;
-				(element as any).__astro_missing_attributes = missingProps;
-				return true;
+
+			const elementRoles = role.split(WHITESPACE_REGEX) as ARIARoleDefinitionKey[];
+			for(const elementRole of elementRoles) {
+				const { requiredProps } = roles.get(elementRole)!;
+				const required_role_props = Object.keys(requiredProps);
+				const missingProps = required_role_props.filter((prop) => !element.hasAttribute(prop));
+				if (missingProps.length > 0) {
+					(element as any).__astro_role = elementRole;
+					(element as any).__astro_missing_attributes = missingProps;
+					return true;
+				}
 			}
 		},
 	},
@@ -522,16 +528,20 @@ export const a11y: AuditRuleWithSelector[] = [
 		match(element) {
 			const role = getRole(element);
 			if (!role) return false;
-			const { props } = roles.get(role)!;
-			const attributes = getAttributeObject(element);
-			const unsupportedAttributes = aria.keys().filter((attribute) => !(attribute in props));
-			const invalidAttributes: string[] = Object.keys(attributes).filter(
-				(key) => key.startsWith('aria-') && unsupportedAttributes.includes(key as any)
-			);
-			if (invalidAttributes.length > 0) {
-				(element as any).__astro_role = role;
-				(element as any).__astro_unsupported_attributes = invalidAttributes;
-				return true;
+
+			const elementRoles = role.split(WHITESPACE_REGEX) as ARIARoleDefinitionKey[];
+			for(const elementRole of elementRoles) {
+				const { props } = roles.get(elementRole)!;
+				const attributes = getAttributeObject(element);
+				const unsupportedAttributes = aria.keys().filter((attribute) => !(attribute in props));
+				const invalidAttributes: string[] = Object.keys(attributes).filter(
+					(key) => key.startsWith('aria-') && unsupportedAttributes.includes(key as any)
+				);
+				if (invalidAttributes.length > 0) {
+					(element as any).__astro_role = elementRole;
+					(element as any).__astro_unsupported_attributes = invalidAttributes;
+					return true;
+				}
 			}
 		},
 	},