Remove aria-query and related rule (#9295)

.changeset/silent-phones-divide.md

@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Remove aria-query package
+
+This is another CJS-only package that breaks usage.

packages/astro/package.json

@@ -124,7 +124,6 @@
     "@babel/types": "^7.23.3",
     "@types/babel__core": "^7.20.4",
     "acorn": "^8.11.2",
-    "aria-query": "^5.3.0",
     "boxen": "^7.1.1",
     "chokidar": "^3.5.3",
     "ci-info": "^4.0.0",
@@ -181,7 +180,6 @@
   "devDependencies": {
     "@astrojs/check": "^0.3.1",
     "@playwright/test": "1.40.0",
-    "@types/aria-query": "^5.0.4",
     "@types/babel__generator": "^7.6.7",
     "@types/babel__traverse": "^7.20.4",
     "@types/chai": "^4.3.10",

packages/astro/src/runtime/client/dev-overlay/plugins/audit/a11y.ts

@@ -23,8 +23,6 @@
  * SOFTWARE.
  */
 
-import type { ARIARoleDefinitionKey } from 'aria-query';
-import { aria, roles } from 'aria-query';
 import type { AuditRuleWithSelector } from './index.js';
 
 const a11y_required_attributes = {
@@ -435,34 +433,6 @@ export const a11y: AuditRuleWithSelector[] = [
 			'This will move elements out of the expected tab order, creating a confusing experience for keyboard users.',
 		selector: '[tabindex]:not([tabindex="-1"]):not([tabindex="0"])',
 	},
-	{
-		code: 'a11y-role-supports-aria-props',
-		title: 'Unsupported ARIA attribute',
-		message: (element) => {
-			const { __astro_role: role, __astro_unsupported_attributes: unsupported } = element as any;
-			return `${
-				element.localName
-			} element has ARIA attributes that are not supported by its role (${role}): ${unsupported.join(
-				', '
-			)}`;
-		},
-		selector: '*',
-		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;
-			}
-		},
-	},
 	{
 		code: 'a11y-structure',
 		title: 'Invalid DOM structure',
@@ -496,16 +466,6 @@ export const a11y: AuditRuleWithSelector[] = [
 	},
 ];
 
-const a11y_labelable = [
-	'button',
-	'input',
-	'keygen',
-	'meter',
-	'output',
-	'progress',
-	'select',
-	'textarea',
-];
 
 /**
  * Exceptions to the rule which follows common A11y conventions
@@ -520,50 +480,3 @@ const a11y_non_interactive_element_to_interactive_role_exceptions = {
 	td: ['gridcell'],
 	fieldset: ['radiogroup', 'presentation'],
 };
-
-const combobox_if_list = ['email', 'search', 'tel', 'text', 'url'];
-function input_implicit_role(attributes: Record<string, string>) {
-	if (!('type' in attributes)) return;
-	const { type, list } = attributes;
-	if (!type) return;
-	if (list && combobox_if_list.includes(type)) {
-		return 'combobox';
-	}
-	return input_type_to_implicit_role.get(type);
-}
-
-/** @param {Map<string, import('#compiler').Attribute>} attribute_map */
-function menuitem_implicit_role(attributes: Record<string, string>) {
-	if (!('type' in attributes)) return;
-	const { type } = attributes;
-	if (!type) return;
-	return menuitem_type_to_implicit_role.get(type);
-}
-
-function getRole(element: Element): ARIARoleDefinitionKey | undefined {
-	if (element.hasAttribute('role')) {
-		return element.getAttribute('role')! as ARIARoleDefinitionKey;
-	}
-	return getImplicitRole(element) as ARIARoleDefinitionKey;
-}
-
-function getImplicitRole(element: Element) {
-	const name = element.localName;
-	const attrs = getAttributeObject(element);
-	if (name === 'menuitem') {
-		return menuitem_implicit_role(attrs);
-	} else if (name === 'input') {
-		return input_implicit_role(attrs);
-	} else {
-		return a11y_implicit_semantics.get(name);
-	}
-}
-
-function getAttributeObject(element: Element): Record<string, string> {
-	let obj: Record<string, string> = {};
-	for (let i = 0; i < element.attributes.length; i++) {
-		const attribute = element.attributes.item(i)!;
-		obj[attribute.name] = attribute.value;
-	}
-	return obj;
-}

pnpm-lock.yaml

@@ -508,9 +508,6 @@ importers:
       acorn:
         specifier: ^8.11.2
         version: 8.11.2
-      aria-query:
-        specifier: ^5.3.0
-        version: 5.3.0
       boxen:
         specifier: ^7.1.1
         version: 7.1.1
@@ -669,9 +666,6 @@ importers:
       '@playwright/test':
         specifier: 1.40.0
         version: 1.40.0
-      '@types/aria-query':
-        specifier: ^5.0.4
-        version: 5.0.4
       '@types/babel__generator':
         specifier: ^7.6.7
         version: 7.6.7
@@ -7247,10 +7241,6 @@ packages:
     resolution: {integrity: sha512-BSNTroRhmBkNiyd7ELK/5Boja92hnQMST6H4z1BqXKeMVzHjp9o1j5poqd5Tyhjd8oMFwxYC4I00eghfg2xrTA==}
     dev: false
 
-  /@types/aria-query@5.0.4:
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
-    dev: true
-
   /@types/babel__core@7.20.4:
     resolution: {integrity: sha512-mLnSC22IC4vcWiuObSRjrLd9XcBTGf59vUSoq2jkQDJ/QQ8PMI9rSuzE+aEV8karUMbskw07bKYoUJCKTUaygg==}
     dependencies: