fix: Fixing the issue of errors caused by multiple values in the role…

…, when multiple roles exist, check each role.

fix #9856

.changeset/eight-flowers-remain.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+When multiple values are set in the role, only the first value is returned, fixing the issue of errors caused by multiple values in the role.

packages/astro/src/runtime/client/dev-toolbar/apps/audit/a11y.ts

@@ -496,13 +496,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(/\s+/) 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 +526,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(/\s+/) 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;
+				}
 			}
 		},
 	},