fix: Update Test Selector types and improve functionality

packages/odyssey-react-mui/package.json

@@ -81,6 +81,7 @@
     "@okta/odyssey-design-tokens": "workspace:^",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
+    "dom-accessibility-api": "^0.7.0",
     "i18next": "^23.8.2",
     "luxon": "^3.4.4",
     "material-react-table": "^2.11.3",

packages/odyssey-react-mui/scripts/generateTestSelectorsJson.ts

@@ -16,7 +16,7 @@ import { join } from "node:path";
 const distDirectory = join(__dirname, "../dist/test-selectors");
 
 import("../src/test-selectors/index").then(
-  ({ odysseyTestSelectors: testSelector }) =>
+  ({ odysseyTestSelector: testSelector }) =>
     mkdir(distDirectory)
       .catch(() => null)
       .then(() =>

packages/odyssey-react-mui/src/Autocomplete.tsx

@@ -39,10 +39,6 @@ import _AutoSizer, {
 } from "react-virtualized-auto-sizer";
 import { useTranslation } from "react-i18next";
 
-// This is required to get around a react-types issue for "AutoSizer is not a valid JSX element."
-// @see https://github.com/bvaughn/react-virtualized/issues/1739#issuecomment-1291444246
-const AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;
-
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
@@ -51,6 +47,42 @@ import {
   useInputValues,
   getControlState,
 } from "./inputUtils";
+import { FeatureTestSelector } from "./test-selectors";
+
+// This is required to get around a react-types issue for "AutoSizer is not a valid JSX element."
+// @see https://github.com/bvaughn/react-virtualized/issues/1739#issuecomment-1291444246
+const AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;
+
+export const AutocompleteTestSelectors = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  feature: {
+    list: {
+      feature: {
+        listItem: {
+          selector: {
+            method: "ByRole",
+            options: {
+              label: "name",
+            },
+            role: "option",
+          },
+        },
+      },
+      isControlledElement: true,
+    },
+  },
+  selector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "combobox",
+  },
+} as const satisfies FeatureTestSelector;
 
 export type AutocompleteProps<
   OptionType,

packages/odyssey-react-mui/src/Callout.tsx

@@ -25,39 +25,27 @@ import { Paragraph } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
 
 export const CalloutTestSelectors = {
+  accessibleText: {
+    text: "description",
+    title: "label",
+  },
   feature: {
     link: {
       selector: {
         method: "ByRole",
         options: {
-          name: "${linkText}",
+          linkText: "name",
         },
         role: "link",
-        templateVariableNames: ["linkText"],
-      },
-    },
-    text: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["text"],
-        text: "${text}",
-      },
-    },
-    title: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["title"],
-        text: "${title}",
       },
     },
   },
   selector: {
     method: "ByRole",
     options: {
-      name: "${title}",
+      title: "name",
     },
-    role: "${role}",
-    templateVariableNames: ["role", "title"],
+    role: ["alert", "status"],
   },
 } as const satisfies FeatureTestSelector;
 

packages/odyssey-react-mui/src/Select.tsx

@@ -52,6 +52,38 @@ import {
   useOdysseyDesignTokens,
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
+import { FeatureTestSelector } from "./test-selectors";
+
+export const SelectTestSelectors = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  feature: {
+    list: {
+      feature: {
+        listItem: {
+          selector: {
+            method: "ByRole",
+            options: {
+              label: "name",
+            },
+            role: "option",
+          },
+        },
+      },
+      isControlledElement: true,
+    },
+  },
+  selector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "combobox",
+  },
+} as const satisfies FeatureTestSelector;
 
 export type SelectOption = {
   text: string;

packages/odyssey-react-mui/src/Tabs.tsx

@@ -38,20 +38,18 @@ export const TabsTestSelectors = {
       selector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "tab",
       },
     },
   },
   selector: {
     method: "ByRole",
     options: {
-      name: "${ariaLabel}",
+      label: "name",
     },
     role: "tablist",
-    templateVariableNames: ["ariaLabel"],
   },
 } as const satisfies FeatureTestSelector;
 

packages/odyssey-react-mui/src/TextField.tsx

@@ -33,52 +33,29 @@ import { FocusHandle, useInputValues, getControlState } from "./inputUtils";
 import { type FeatureTestSelector } from "./test-selectors";
 
 export const TextFieldTestSelectors = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
   feature: {
-    description: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["hint"],
-        text: "${hint}",
-      },
-    },
-    errorMessage: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["errorMessage"],
-        text: "${errorMessage}",
-      },
-    },
-    input: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "textbox",
-        templateVariableNames: ["label"],
-      },
-    },
-    label: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "LabelText",
-        templateVariableNames: ["label"],
-      },
-    },
     link: {
       selector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "link",
       },
     },
   },
+  selector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "textbox",
+  },
 } as const satisfies FeatureTestSelector;
 
 export const textFieldTypeValues = [

packages/odyssey-react-mui/src/test-selectors/featureTestSelector.ts

@@ -10,32 +10,132 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ByRoleOptions } from "@testing-library/dom";
-import { AriaRole } from "react";
-
-export type Selector = {
-  options?: ByRoleOptions;
-  templateVariableNames: string[];
-} & (
-  | {
-      method: "ByRole";
-      role: AriaRole;
-    }
-  | {
-      method: "ByLabelText" | "ByPlaceholderText" | "ByText";
-      text: string;
-    }
-);
+import {
+  type ByRoleOptions,
+  type SelectorMatcherOptions,
+} from "@testing-library/dom";
+
+import {
+  type RoleSelectorMethod,
+  type TextSelectorMethod,
+} from "./getByQuerySelector";
+
+/**
+ * We can't use React's `AriaRole` because it allows any string value. We want to be very specific. This is otherwise copied straight from React's code.
+ * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L2815
+ */
+export type AriaRole =
+  | "alert"
+  | "alertdialog"
+  | "application"
+  | "article"
+  | "banner"
+  | "button"
+  | "cell"
+  | "checkbox"
+  | "columnheader"
+  | "combobox"
+  | "complementary"
+  | "contentinfo"
+  | "definition"
+  | "dialog"
+  | "directory"
+  | "document"
+  | "feed"
+  | "figure"
+  | "form"
+  | "grid"
+  | "gridcell"
+  | "group"
+  | "heading"
+  | "img"
+  | "link"
+  | "list"
+  | "listbox"
+  | "listitem"
+  | "log"
+  | "main"
+  | "marquee"
+  | "math"
+  | "menu"
+  | "menubar"
+  | "menuitem"
+  | "menuitemcheckbox"
+  | "menuitemradio"
+  | "navigation"
+  | "none"
+  | "note"
+  | "option"
+  | "presentation"
+  | "progressbar"
+  | "radio"
+  | "radiogroup"
+  | "region"
+  | "row"
+  | "rowgroup"
+  | "rowheader"
+  | "scrollbar"
+  | "search"
+  | "searchbox"
+  | "separator"
+  | "slider"
+  | "spinbutton"
+  | "status"
+  | "switch"
+  | "tab"
+  | "table"
+  | "tablist"
+  | "tabpanel"
+  | "term"
+  | "textbox"
+  | "timer"
+  | "toolbar"
+  | "tooltip"
+  | "tree"
+  | "treegrid"
+  | "treeitem";
+
+export type RoleSelector = {
+  method: RoleSelectorMethod;
+  options: Record<string, keyof ByRoleOptions>;
+  role: AriaRole | AriaRole[];
+  // | "UNKNOWN" // This should be a `Symbol`, but it can't because this is ultimately going to be JSON stringified.
+};
+
+export type TextSelector = {
+  method: TextSelectorMethod;
+  options: Record<string, keyof SelectorMatcherOptions>;
+  text: string;
+};
+
+export type Selector = RoleSelector | TextSelector;
 
 export type TestSelector = {
   selector: Selector;
 };
 
+export type Feature = Record<
+  string,
+  FeatureTestSelector & { isControlledElement?: true }
+>;
+
 export type FeatureSelector = {
-  feature: Record<string, FeatureTestSelector>;
+  feature: Feature;
+};
+
+export type AccessibleLabelSelectorType =
+  | "description"
+  | "errorMessage"
+  | "label";
+
+export type AccessibleLabelSelector = {
+  /** An "accessible -> semantic" name mapping such as "`description` -> `hint`". */
+  accessibleText: Record<string, AccessibleLabelSelectorType>;
 };
 
 export type FeatureTestSelector =
-  | TestSelector
   | FeatureSelector
-  | (FeatureSelector & TestSelector);
+  | TestSelector
+  | (FeatureSelector & TestSelector)
+  | (AccessibleLabelSelector & TestSelector)
+  | (FeatureSelector & AccessibleLabelSelector & TestSelector);