Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-17 22:44:24 -05:00
Code Issues Activity

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

Browse source 
* 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 <natemoo-re@users.noreply.github.com>
This commit is contained in:
YS.Y 2024-02-14 01:27:33 +08:00 • committed by GitHub
parent 2168635a6f
commit 73bd900754
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/eight-flowers-remain.md Normal file
View file

@ -0,0 +1,5 @@
---
"astro": patch
---
Fixes false positives in the dev overlay audit when multiple `role` values exist.

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

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