chore: drop aria-query (#139)

Author: jlp-craigmorten

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guidepup/virtual-screen-reader",
-  "version": "0.31.2",
+  "version": "0.32.0",
   "description": "Virtual Screen Reader driver for unit test automation.",
   "author": "Craig Morten <[email protected]>",
   "license": "MIT",
@@ -65,7 +65,6 @@
   "dependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^14.6.1",
-    "aria-query": "^5.3.2",
     "dom-accessibility-api": "^0.7.0",
     "html-aria": "^0.5.1"
   },

src/createAccessibilityTree.ts

@@ -12,7 +12,7 @@ export interface AccessibilityNode {
   accessibleDescription: string;
   accessibleName: string;
   accessibleValue: string;
-  allowedAccessibilityChildRoles: string[][];
+  allowedAccessibilityChildRoles: string[];
   alternateReadingOrderParents: Node[];
   childrenPresentational: boolean;
   isInert: boolean;

src/getNodeAccessibilityData/getAccessibleAttributeLabels/getAttributesByRole.ts

@@ -1,45 +1,54 @@
-import { ARIARoleDefinitionKey, roles } from "aria-query";
-import { globalStatesAndProperties, reverseSynonymRolesMap } from "../getRole";
+import { ARIAAttribute, ARIARole, roles } from "html-aria";
+import { globalStatesAndProperties } from "../getRole";
 
 const ignoreAttributesWithAccessibleValue = new Set(["aria-placeholder"]);
 
+const nonSpecCompliantAttributeMap: Record<
+  string,
+  Record<string, boolean | number | string | null>
+> = {
+  listitem: { "aria-level": null },
+  option: { "aria-selected": false },
+};
+
 export const getAttributesByRole = ({
   accessibleValue,
   role,
 }: {
   accessibleValue: string;
   role: string;
 }): [string, string | null][] => {
-  // TODO: temporary solution until aria-query is updated with WAI-ARIA 1.3
-  // synonym roles, or the html-aria package supports implicit attribute
-  // values.
-  const reverseSynonymRole = (reverseSynonymRolesMap[role] ??
-    role) as ARIARoleDefinitionKey;
-
-  // TODO: swap out with the html-aria package if implicit role attributes
-  // become supported.
   const {
-    props: implicitRoleAttributes = {},
-    prohibitedProps: prohibitedAttributes = [],
-  } = (roles.get(reverseSynonymRole) ?? {}) as {
-    props: Record<string, string | undefined>;
-    prohibitedProps: string[];
+    supported: supportedAttributes = [],
+    defaultAttributeValues = {},
+    prohibited: prohibitedAttributes = [],
+  } = roles[role as ARIARole] ?? {};
+
+  const implicitRoleAttributes = {
+    ...defaultAttributeValues,
+    ...nonSpecCompliantAttributeMap[role],
   };
 
   const uniqueAttributes = Array.from(
     new Set([
       ...Object.keys(implicitRoleAttributes),
+      ...supportedAttributes,
       ...globalStatesAndProperties,
     ])
   )
-    .filter((attribute) => !prohibitedAttributes.includes(attribute))
+    .filter(
+      (attribute) => !prohibitedAttributes.includes(attribute as ARIAAttribute)
+    )
     .filter(
       (attribute) =>
         !accessibleValue || !ignoreAttributesWithAccessibleValue.has(attribute)
     );
 
   return uniqueAttributes.map((attribute) => [
     attribute,
-    implicitRoleAttributes[attribute] ?? null,
+    attribute in implicitRoleAttributes &&
+    implicitRoleAttributes[attribute] !== null
+      ? implicitRoleAttributes[attribute].toString()
+      : null,
   ]);
 };

src/getNodeAccessibilityData/getRole.ts

@@ -1,5 +1,4 @@
-import { getRole as getHtmlAriaRole, roles } from "html-aria";
-import { roles as backupRoles } from "aria-query";
+import { ALL_ROLES, ARIARole, getRole as getHtmlAriaRole } from "html-aria";
 import { getLocalName } from "../getLocalName";
 import { isElement } from "../isElement";
 
@@ -11,22 +10,7 @@ export const synonymRolesMap: Record<string, string> = {
   directory: "list",
 };
 
-export const reverseSynonymRolesMap: Record<string, string> =
-  Object.fromEntries(
-    Object.entries(synonymRolesMap).map(([key, value]) => [value, key])
-  );
-
-const allowedNonAbstractRoles = new Set([
-  ...(Object.entries(roles)
-    .filter(([, { type }]) => !type.includes("abstract"))
-    .map(([key]) => key) as string[]),
-  // TODO: remove once the `html-aria` package supports `dpub-aam` /
-  // `dpub-aria` specifications.
-  ...(backupRoles
-    .entries()
-    .filter(([, { abstract }]) => !abstract)
-    .map(([key]) => key) as string[]),
-]);
+const allowedNonAbstractRoles = new Set(ALL_ROLES);
 
 const rolesRequiringName = new Set(["form", "region"]);
 
@@ -84,7 +68,7 @@ function getExplicitRole({
   node,
 }: {
   accessibleName: string;
-  allowedAccessibilityRoles: string[][];
+  allowedAccessibilityRoles: string[];
   inheritedImplicitPresentational: boolean;
   node: HTMLElement;
 }) {
@@ -99,7 +83,7 @@ function getExplicitRole({
      *
      * REF: https://www.w3.org/TR/wai-aria-1.2/#document-handling_author-errors_roles
      */
-    .filter((role) => allowedNonAbstractRoles.has(role))
+    .filter((role) => allowedNonAbstractRoles.has(role as ARIARole))
     /**
      * Certain landmark roles require names from authors. In situations where
      * an author has not specified names for these landmarks, it is
@@ -133,7 +117,7 @@ function getExplicitRole({
    */
 
   const isExplicitAllowedChildElement = allowedAccessibilityRoles.some(
-    ([allowedExplicitRole]) =>
+    (allowedExplicitRole) =>
       authorErrorFilteredRoles?.[0] === allowedExplicitRole
   );
 
@@ -182,7 +166,7 @@ export function getRole({
   node,
 }: {
   accessibleName: string;
-  allowedAccessibilityRoles: string[][];
+  allowedAccessibilityRoles: string[];
   inheritedImplicitPresentational: boolean;
   node: Node;
 }): { explicitRole: string; implicitRole: string; role: string } {

src/getNodeAccessibilityData/index.ts

@@ -1,31 +1,17 @@
-import { ARIARoleDefinition, ARIARoleDefinitionKey, roles } from "aria-query";
-import { getRole, presentationRoles, synonymRolesMap } from "./getRole";
+import { ARIARole, roles } from "html-aria";
+import { getRole, presentationRoles } from "./getRole";
 import { getAccessibleDescription } from "./getAccessibleDescription";
 import { getAccessibleName } from "./getAccessibleName";
 import { getAccessibleValue } from "./getAccessibleValue";
 import { getLocalName } from "../getLocalName";
 import { isDialogRole } from "../isDialogRole";
 import { isElement } from "../isElement";
 
-// TODO: swap out with the html-aria package once it supports `dpub-aam` /
-// `dpub-aria` specifications.
-const childrenPresentationalRoles = new Set([
-  ...(roles
-    .entries()
+const childrenPresentationalRoles = new Set(
+  Object.entries(roles)
     .filter(([, { childrenPresentational }]) => childrenPresentational)
-    .map(([key]) => key) as string[]),
-  // TODO: temporary catering to WAI-ARIA 1.3 synonym roles that aria-query
-  // doesn't handle.
-  ...(Object.entries(synonymRolesMap)
-    .map(
-      ([from, to]) =>
-        [to, roles.get(from as ARIARoleDefinitionKey)] as
-          | [ARIARoleDefinitionKey, ARIARoleDefinition]
-          | [ARIARoleDefinitionKey, undefined]
-    )
-    .filter(([, role]) => role?.childrenPresentational)
-    .map(([key]) => key) as string[]),
-]);
+    .map(([key]) => key) as string[]
+);
 
 const getSpokenRole = ({
   isGeneric,
@@ -108,7 +94,7 @@ export function getNodeAccessibilityData({
   inheritedImplicitPresentational,
   node,
 }: {
-  allowedAccessibilityRoles: string[][];
+  allowedAccessibilityRoles: string[];
   inheritedImplicitInert: boolean;
   inheritedImplicitPresentational: boolean;
   node: Node;
@@ -138,16 +124,17 @@ export function getNodeAccessibilityData({
     role,
   });
 
-  const { requiredOwnedElements: allowedAccessibilityChildRoles } = (roles.get(
-    role as ARIARoleDefinitionKey
-  ) as unknown as {
-    requiredOwnedElements: string[][];
-  }) ?? { requiredOwnedElements: [] };
+  const { allowedChildRoles: allowedAccessibilityChildRoles } = roles[
+    role as ARIARole
+  ] ?? {
+    allowedChildRoles: [],
+  };
 
-  const { requiredOwnedElements: implicitAllowedAccessibilityChildRoles } =
-    (roles.get(implicitRole as ARIARoleDefinitionKey) as unknown as {
-      requiredOwnedElements: string[][];
-    }) ?? { requiredOwnedElements: [] };
+  const { allowedChildRoles: implicitAllowedAccessibilityChildRoles } = roles[
+    implicitRole as ARIARole
+  ] ?? {
+    allowedChildRoles: [],
+  };
 
   /**
    * Any descendants of elements that have the characteristic "Children

test/int/accessibleValue.int.test.ts

@@ -111,7 +111,7 @@ describe("Placeholder Attribute Property", () => {
     await virtual.next();
 
     expect(await virtual.lastSpokenPhrase()).toBe(
-      "combobox, second, not expanded, has popup listbox"
+      "combobox, second, has popup listbox, not expanded"
     );
 
     await virtual.stop();
@@ -130,7 +130,7 @@ describe("Placeholder Attribute Property", () => {
     await virtual.next();
 
     expect(await virtual.lastSpokenPhrase()).toBe(
-      "listbox, second; third, multi-selectable, orientated vertically"
+      "listbox, second; third, orientated vertically, multi-selectable"
     );
 
     await virtual.stop();
@@ -150,7 +150,7 @@ describe("Placeholder Attribute Property", () => {
     await virtual.next();
 
     expect(await virtual.lastSpokenPhrase()).toBe(
-      "combobox, not expanded, has popup listbox"
+      "combobox, has popup listbox, not expanded"
     );
 
     await virtual.stop();
@@ -167,7 +167,7 @@ describe("Placeholder Attribute Property", () => {
     await virtual.next();
 
     expect(await virtual.lastSpokenPhrase()).toBe(
-      "progressbar, Loading:, 23, max value 100, current value 23%"
+      "progressbar, Loading:, 23, max value 100, min value 0, current value 23%"
     );
 
     await virtual.stop();
@@ -184,7 +184,7 @@ describe("Placeholder Attribute Property", () => {
     await virtual.next();
 
     expect(await virtual.lastSpokenPhrase()).toBe(
-      "progressbar, Loading:, max value 100, current value 23%"
+      "progressbar, Loading:, max value 100, min value 0, current value 23%"
     );
 
     await virtual.stop();
@@ -201,7 +201,7 @@ describe("Placeholder Attribute Property", () => {
     await virtual.next();
 
     expect(await virtual.lastSpokenPhrase()).toBe(
-      "progressbar, Loading:, current value massive, max value 100"
+      "progressbar, Loading:, max value 100, min value 0, current value massive"
     );
 
     await virtual.stop();

test/int/allowedAccessibilityChildRoles.int.test.ts

@@ -22,7 +22,7 @@ describe("Allowed Accessibility Child Roles", () => {
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
       "listbox, orientated vertically",
-      "option, option text, position 1, set size 1, not selected",
+      "option, option text, not selected, position 1, set size 1",
       "end of listbox, orientated vertically",
       "end of document",
     ]);
@@ -48,7 +48,7 @@ describe("Allowed Accessibility Child Roles", () => {
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
       "listbox, orientated vertically",
-      "option, option text, position 1, set size 1, not selected",
+      "option, option text, not selected, position 1, set size 1",
       "end of listbox, orientated vertically",
       "end of document",
     ]);
@@ -71,7 +71,7 @@ describe("Allowed Accessibility Child Roles", () => {
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
       "listbox, orientated vertically",
-      "option, option text, position 1, set size 1, not selected",
+      "option, option text, not selected, position 1, set size 1",
       "end of listbox, orientated vertically",
       "end of document",
     ]);
@@ -98,7 +98,7 @@ describe("Allowed Accessibility Child Roles", () => {
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
       "listbox, orientated vertically",
-      "option, option text, position 1, set size 1, not selected",
+      "option, option text, not selected, position 1, set size 1",
       "end of listbox, orientated vertically",
       "end of document",
     ]);

test/int/ariaActiveDescendant.int.test.ts

@@ -25,7 +25,7 @@ describe("Aria Active Descendant", () => {
 
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
-      "combobox, active descendant California, autocomplete in list, read only, not expanded, has popup listbox",
+      "combobox, has popup listbox, not expanded, active descendant California, autocomplete in list, read only",
     ]);
 
     await virtual.stop();
@@ -50,7 +50,7 @@ describe("Aria Active Descendant", () => {
 
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
-      "combobox, autocomplete in list, read only, not expanded, has popup listbox",
+      "combobox, has popup listbox, not expanded, autocomplete in list, read only",
     ]);
 
     await virtual.stop();

test/int/ariaActiveDescendantCombobox.int.test.ts

@@ -24,10 +24,10 @@ describe("Aria Active Descendant", () => {
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
       "State",
-      "combobox, State, autocomplete in list, not expanded, has popup listbox, 1 control",
-      "combobox, State, autocomplete in list, expanded, has popup listbox, 1 control",
-      "combobox, State, nebr, autocomplete in list, expanded, has popup listbox, 1 control",
-      "combobox, State, nebr, active descendant Nebraska, autocomplete in list, expanded, has popup listbox, 1 control",
+      "combobox, State, has popup listbox, not expanded, autocomplete in list, 1 control",
+      "combobox, State, has popup listbox, expanded, autocomplete in list, 1 control",
+      "combobox, State, nebr, has popup listbox, expanded, autocomplete in list, 1 control",
+      "combobox, State, nebr, has popup listbox, expanded, active descendant Nebraska, autocomplete in list, 1 control",
     ]);
   });
 });

test/int/ariaActiveDescendantMenuButton1.int.test.ts

@@ -21,8 +21,8 @@ describe("Aria Active Descendant Menu Button", () => {
 
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
-      "button, Actions, has popup menu, 1 control",
-      "button, Actions, expanded, has popup menu, 1 control",
+      "button, Actions, 1 control, has popup menu",
+      "button, Actions, 1 control, expanded, has popup menu",
       "menu, Actions, orientated vertically, active descendant Action 1",
     ]);