@react-aria/test-utils 1.0.0-alpha.7 → 1.0.0-beta.0

package/dist/user.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAwBD,IAAI,kCAAY;IACd,UAAU,CAAA,GAAA,yCAAW;IACrB,SAAS,CAAA,GAAA,wCAAU;IACnB,QAAQ,CAAA,GAAA,yCAAS;IACjB,YAAY,CAAA,GAAA,yCAAa;IACzB,YAAY,CAAA,GAAA,yCAAa;IACzB,WAAW,CAAA,GAAA,yCAAY;IACvB,QAAQ,CAAA,GAAA,yCAAS;IACjB,QAAQ,CAAA,GAAA,yCAAS;AACnB;AA0BA,IAAI,4CAAsB,CAAC,WAAiC,IAAI,QAAQ,CAAC,UAAY,WAAW,SAAS;AAElG,MAAM;IAoBX;;GAEC,GACD,aAAqC,WAAc,EAAE,IAAmB,EAAa;QACnF,OAAO,IAAI,AAAC,+BAAU,CAAC,YAAY,CAAC;YAAC,iBAAiB,IAAI,CAAC,eAAe;YAAE,cAAc,IAAI,CAAC,YAAY;YAAE,GAAG,IAAI;YAAE,MAAM,IAAI,CAAC,IAAI;QAAA;IACvI;IAZA,YAAY,OAAiB,CAAC,CAAC,CAAE;QAC/B,IAAI,mBAAC,eAAe,gBAAE,YAAY,EAAC,GAAG;QACtC,IAAI,CAAC,IAAI,GAAG,CAAA,GAAA,8BAAQ,EAAE,KAAK,CAAC;YAAC,OAAO;wBAAM;QAAU;QACpD,IAAI,CAAC,eAAe,GAAG;QACvB,IAAI,CAAC,YAAY,GAAG,gBAAgB;IACtC;AAQF","sources":["packages/@react-aria/test-utils/src/user.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ComboBoxTester} from './combobox';\nimport {\n  ComboBoxTesterOpts,\n  GridListTesterOpts,\n  ListBoxTesterOpts,\n  MenuTesterOpts,\n  SelectTesterOpts,\n  TableTesterOpts,\n  TabsTesterOpts,\n  TreeTesterOpts,\n  UserOpts\n} from './types';\nimport {GridListTester} from './gridlist';\nimport {ListBoxTester} from './listbox';\nimport {MenuTester} from './menu';\nimport {pointerMap} from './';\nimport {SelectTester} from './select';\nimport {TableTester} from './table';\nimport {TabsTester} from './tabs';\nimport {TreeTester} from './tree';\nimport userEvent from '@testing-library/user-event';\n\nlet keyToUtil = {\n  'Select': SelectTester,\n  'Table': TableTester,\n  'Menu': MenuTester,\n  'ComboBox': ComboBoxTester,\n  'GridList': GridListTester,\n  'ListBox': ListBoxTester,\n  'Tabs': TabsTester,\n  'Tree': TreeTester\n} as const;\nexport type PatternNames = keyof typeof keyToUtil;\n\n// Conditional type: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html\ntype Tester<T> =\n  T extends 'ComboBox' ? ComboBoxTester :\n  T extends 'GridList' ? GridListTester :\n  T extends 'ListBox' ? ListBoxTester :\n  T extends 'Menu' ? MenuTester :\n  T extends 'Select' ? SelectTester :\n  T extends 'Table' ? TableTester :\n  T extends 'Tabs' ? TabsTester :\n  T extends 'Tree' ? TreeTester :\n  never;\n\ntype TesterOpts<T> =\n  T extends 'ComboBox' ? ComboBoxTesterOpts :\n  T extends 'GridList' ? GridListTesterOpts :\n  T extends 'ListBox' ? ListBoxTesterOpts :\n  T extends 'Menu' ? MenuTesterOpts :\n  T extends 'Select' ? SelectTesterOpts :\n  T extends 'Table' ? TableTesterOpts :\n  T extends 'Tabs' ? TabsTesterOpts :\n  T extends 'Tree' ? TreeTesterOpts :\n  never;\n\nlet defaultAdvanceTimer = (waitTime: number | undefined) => new Promise((resolve) => setTimeout(resolve, waitTime));\n\nexport class User {\n  private user;\n  /**\n   * The interaction type (mouse, touch, keyboard) that the test util user will use when interacting with a component. This can be overridden\n   * at the aria pattern util level if needed.\n   * @default mouse\n   */\n  interactionType: UserOpts['interactionType'];\n  /**\n   * A function used by the test utils to advance timers during interactions. Required for certain aria patterns (e.g. table).\n   */\n  advanceTimer: UserOpts['advanceTimer'];\n\n  constructor(opts: UserOpts = {}) {\n    let {interactionType, advanceTimer} = opts;\n    this.user = userEvent.setup({delay: null, pointerMap});\n    this.interactionType = interactionType;\n    this.advanceTimer = advanceTimer || defaultAdvanceTimer;\n  }\n\n  /**\n   * Creates an aria pattern tester, inheriting the options provided to the original user.\n   */\n  createTester<T extends PatternNames>(patternName: T, opts: TesterOpts<T>): Tester<T> {\n    return new (keyToUtil)[patternName]({interactionType: this.interactionType, advanceTimer: this.advanceTimer, ...opts, user: this.user}) as Tester<T>;\n  }\n}\n"],"names":[],"version":3,"file":"user.module.js.map"}
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAwBD,IAAI,kCASA;IACF,UAAU,CAAA,GAAA,yCAAW;IACrB,SAAS,CAAA,GAAA,wCAAU;IACnB,QAAQ,CAAA,GAAA,yCAAS;IACjB,YAAY,CAAA,GAAA,yCAAa;IACzB,YAAY,CAAA,GAAA,yCAAa;IACzB,WAAW,CAAA,GAAA,yCAAY;IACvB,QAAQ,CAAA,GAAA,yCAAS;IACjB,QAAQ,CAAA,GAAA,yCAAS;AACnB;AA0BA,IAAI,4CAAsB,CAAC,WAAiC,IAAI,QAAQ,CAAC,UAAY,WAAW,SAAS;AAElG,MAAM;IAoBX;;GAEC,GACD,aAAqC,WAAc,EAAE,IAAmB,EAAa;QACnF,OAAO,IAAI,AAAC,+BAAU,CAAC,YAAY,CAAC;YAAC,iBAAiB,IAAI,CAAC,eAAe;YAAE,cAAc,IAAI,CAAC,YAAY;YAAE,GAAG,IAAI;YAAE,MAAM,IAAI,CAAC,IAAI;QAAA;IACvI;IAZA,YAAY,OAAiB,CAAC,CAAC,CAAE;QAC/B,IAAI,mBAAC,eAAe,gBAAE,YAAY,EAAC,GAAG;QACtC,IAAI,CAAC,IAAI,GAAG,CAAA,GAAA,8BAAQ,EAAE,KAAK,CAAC;YAAC,OAAO;wBAAM;QAAU;QACpD,IAAI,CAAC,eAAe,GAAG;QACvB,IAAI,CAAC,YAAY,GAAG,gBAAgB;IACtC;AAQF","sources":["packages/@react-aria/test-utils/src/user.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ComboBoxTester} from './combobox';\nimport {\n  ComboBoxTesterOpts,\n  GridListTesterOpts,\n  ListBoxTesterOpts,\n  MenuTesterOpts,\n  SelectTesterOpts,\n  TableTesterOpts,\n  TabsTesterOpts,\n  TreeTesterOpts,\n  UserOpts\n} from './types';\nimport {GridListTester} from './gridlist';\nimport {ListBoxTester} from './listbox';\nimport {MenuTester} from './menu';\nimport {pointerMap} from './';\nimport {SelectTester} from './select';\nimport {TableTester} from './table';\nimport {TabsTester} from './tabs';\nimport {TreeTester} from './tree';\nimport userEvent from '@testing-library/user-event';\n\nlet keyToUtil: {\n  'Select': typeof SelectTester,\n  'Table': typeof TableTester,\n  'Menu': typeof MenuTester,\n  'ComboBox': typeof ComboBoxTester,\n  'GridList': typeof GridListTester,\n  'ListBox': typeof ListBoxTester,\n  'Tabs': typeof TabsTester,\n  'Tree': typeof TreeTester\n} = {\n  'Select': SelectTester,\n  'Table': TableTester,\n  'Menu': MenuTester,\n  'ComboBox': ComboBoxTester,\n  'GridList': GridListTester,\n  'ListBox': ListBoxTester,\n  'Tabs': TabsTester,\n  'Tree': TreeTester\n} as const;\nexport type PatternNames = keyof typeof keyToUtil;\n\n// Conditional type: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html\ntype Tester<T> =\n  T extends 'ComboBox' ? ComboBoxTester :\n  T extends 'GridList' ? GridListTester :\n  T extends 'ListBox' ? ListBoxTester :\n  T extends 'Menu' ? MenuTester :\n  T extends 'Select' ? SelectTester :\n  T extends 'Table' ? TableTester :\n  T extends 'Tabs' ? TabsTester :\n  T extends 'Tree' ? TreeTester :\n  never;\n\ntype TesterOpts<T> =\n  T extends 'ComboBox' ? ComboBoxTesterOpts :\n  T extends 'GridList' ? GridListTesterOpts :\n  T extends 'ListBox' ? ListBoxTesterOpts :\n  T extends 'Menu' ? MenuTesterOpts :\n  T extends 'Select' ? SelectTesterOpts :\n  T extends 'Table' ? TableTesterOpts :\n  T extends 'Tabs' ? TabsTesterOpts :\n  T extends 'Tree' ? TreeTesterOpts :\n  never;\n\nlet defaultAdvanceTimer = (waitTime: number | undefined) => new Promise((resolve) => setTimeout(resolve, waitTime));\n\nexport class User {\n  private user;\n  /**\n   * The interaction type (mouse, touch, keyboard) that the test util user will use when interacting with a component. This can be overridden\n   * at the aria pattern util level if needed.\n   * @default mouse\n   */\n  interactionType: UserOpts['interactionType'];\n  /**\n   * A function used by the test utils to advance timers during interactions. Required for certain aria patterns (e.g. table).\n   */\n  advanceTimer: UserOpts['advanceTimer'];\n\n  constructor(opts: UserOpts = {}) {\n    let {interactionType, advanceTimer} = opts;\n    this.user = userEvent.setup({delay: null, pointerMap});\n    this.interactionType = interactionType;\n    this.advanceTimer = advanceTimer || defaultAdvanceTimer;\n  }\n\n  /**\n   * Creates an aria pattern tester, inheriting the options provided to the original user.\n   */\n  createTester<T extends PatternNames>(patternName: T, opts: TesterOpts<T>): Tester<T> {\n    return new (keyToUtil)[patternName]({interactionType: this.interactionType, advanceTimer: this.advanceTimer, ...opts, user: this.user}) as Tester<T>;\n  }\n}\n"],"names":[],"version":3,"file":"user.module.js.map"}

package/dist/userEventMaps.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAEO,IAAI,4CAA2B;IACpC;QAAC,MAAM;QAAa,aAAa;QAAS,QAAQ;QAAW,QAAQ;QAAG,OAAO;QAAG,UAAU;IAAG;IAC/F;QAAC,MAAM;QAAc,aAAa;QAAS,QAAQ;IAAW;IAC9D;QAAC,MAAM;QAAe,aAAa;QAAS,QAAQ;IAAW;IAC/D;QAAC,MAAM;QAAU,aAAa;QAAS,QAAQ;QAAG,OAAO;IAAC;IAC1D;QAAC,MAAM;QAAU,aAAa;IAAO;IACrC;QAAC,MAAM;QAAU,aAAa;IAAO;CACtC","sources":["packages/@react-aria/test-utils/src/userEventMaps.ts"],"sourcesContent":["import {pointerKey} from '@testing-library/user-event/system/pointer/shared';\n\nexport let pointerMap: pointerKey[] = [\n  {name: 'MouseLeft', pointerType: 'mouse', button: 'primary', height: 1, width: 1, pressure: 0.5},\n  {name: 'MouseRight', pointerType: 'mouse', button: 'secondary'},\n  {name: 'MouseMiddle', pointerType: 'mouse', button: 'auxiliary'},\n  {name: 'TouchA', pointerType: 'touch', height: 1, width: 1},\n  {name: 'TouchB', pointerType: 'touch'},\n  {name: 'TouchC', pointerType: 'touch'}\n] as unknown as pointerKey[];\n"],"names":[],"version":3,"file":"userEventMaps.main.js.map"}
+{"mappings":";;;;;;AAEO,IAAI,4CAA2B;IACpC;QAAC,MAAM;QAAa,aAAa;QAAS,QAAQ;QAAW,QAAQ;QAAG,OAAO;QAAG,UAAU;IAAG;IAC/F;QAAC,MAAM;QAAc,aAAa;QAAS,QAAQ;IAAW;IAC9D;QAAC,MAAM;QAAe,aAAa;QAAS,QAAQ;IAAW;IAC/D;QAAC,MAAM;QAAU,aAAa;QAAS,QAAQ;QAAG,OAAO;IAAC;IAC1D;QAAC,MAAM;QAAU,aAAa;IAAO;IACrC;QAAC,MAAM;QAAU,aAAa;IAAO;CACtC","sources":["packages/@react-aria/test-utils/src/userEventMaps.ts"],"sourcesContent":["import {pointerKey} from '@testing-library/user-event';\n\nexport let pointerMap: pointerKey[] = [\n  {name: 'MouseLeft', pointerType: 'mouse', button: 'primary', height: 1, width: 1, pressure: 0.5},\n  {name: 'MouseRight', pointerType: 'mouse', button: 'secondary'},\n  {name: 'MouseMiddle', pointerType: 'mouse', button: 'auxiliary'},\n  {name: 'TouchA', pointerType: 'touch', height: 1, width: 1},\n  {name: 'TouchB', pointerType: 'touch'},\n  {name: 'TouchC', pointerType: 'touch'}\n] as unknown as pointerKey[];\n"],"names":[],"version":3,"file":"userEventMaps.main.js.map"}

package/dist/userEventMaps.module.js.map

@@ -1 +1 @@
-{"mappings":"AAEO,IAAI,4CAA2B;IACpC;QAAC,MAAM;QAAa,aAAa;QAAS,QAAQ;QAAW,QAAQ;QAAG,OAAO;QAAG,UAAU;IAAG;IAC/F;QAAC,MAAM;QAAc,aAAa;QAAS,QAAQ;IAAW;IAC9D;QAAC,MAAM;QAAe,aAAa;QAAS,QAAQ;IAAW;IAC/D;QAAC,MAAM;QAAU,aAAa;QAAS,QAAQ;QAAG,OAAO;IAAC;IAC1D;QAAC,MAAM;QAAU,aAAa;IAAO;IACrC;QAAC,MAAM;QAAU,aAAa;IAAO;CACtC","sources":["packages/@react-aria/test-utils/src/userEventMaps.ts"],"sourcesContent":["import {pointerKey} from '@testing-library/user-event/system/pointer/shared';\n\nexport let pointerMap: pointerKey[] = [\n  {name: 'MouseLeft', pointerType: 'mouse', button: 'primary', height: 1, width: 1, pressure: 0.5},\n  {name: 'MouseRight', pointerType: 'mouse', button: 'secondary'},\n  {name: 'MouseMiddle', pointerType: 'mouse', button: 'auxiliary'},\n  {name: 'TouchA', pointerType: 'touch', height: 1, width: 1},\n  {name: 'TouchB', pointerType: 'touch'},\n  {name: 'TouchC', pointerType: 'touch'}\n] as unknown as pointerKey[];\n"],"names":[],"version":3,"file":"userEventMaps.module.js.map"}
+{"mappings":"AAEO,IAAI,4CAA2B;IACpC;QAAC,MAAM;QAAa,aAAa;QAAS,QAAQ;QAAW,QAAQ;QAAG,OAAO;QAAG,UAAU;IAAG;IAC/F;QAAC,MAAM;QAAc,aAAa;QAAS,QAAQ;IAAW;IAC9D;QAAC,MAAM;QAAe,aAAa;QAAS,QAAQ;IAAW;IAC/D;QAAC,MAAM;QAAU,aAAa;QAAS,QAAQ;QAAG,OAAO;IAAC;IAC1D;QAAC,MAAM;QAAU,aAAa;IAAO;IACrC;QAAC,MAAM;QAAU,aAAa;IAAO;CACtC","sources":["packages/@react-aria/test-utils/src/userEventMaps.ts"],"sourcesContent":["import {pointerKey} from '@testing-library/user-event';\n\nexport let pointerMap: pointerKey[] = [\n  {name: 'MouseLeft', pointerType: 'mouse', button: 'primary', height: 1, width: 1, pressure: 0.5},\n  {name: 'MouseRight', pointerType: 'mouse', button: 'secondary'},\n  {name: 'MouseMiddle', pointerType: 'mouse', button: 'auxiliary'},\n  {name: 'TouchA', pointerType: 'touch', height: 1, width: 1},\n  {name: 'TouchB', pointerType: 'touch'},\n  {name: 'TouchC', pointerType: 'touch'}\n] as unknown as pointerKey[];\n"],"names":[],"version":3,"file":"userEventMaps.module.js.map"}

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@react-aria/test-utils",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-beta.0",
   "description": "Testing utils for react-aria patterns",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
   "exports": {
-    "types": "./dist/types.d.ts",
+    "source": "./src/index.ts",
+    "types": [
+      "./dist/types.d.ts",
+      "./src/index.ts"
+    ],
     "import": "./dist/import.mjs",
     "require": "./dist/main.js"
   },
@@ -33,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9c77d4e8267ed39469c65f65da94ece7be509874"
+  "gitHead": "8b9348ff255e018b2dd9b27e2a45507cadfa1d35"
 }

package/src/combobox.ts

@@ -55,14 +55,17 @@ export class ComboBoxTester {
     if (trigger) {
       this._trigger = trigger;
     } else {
-      let trigger = within(root).queryByRole('button', {hidden: true});
-      if (trigger) {
-        this._trigger = trigger;
-      } else {
-        // For cases like https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ where the combobox
-        // is also the trigger button
-        this._trigger = this._combobox;
+      let buttons = within(root).queryAllByRole('button', {hidden: true});
+
+      if (buttons.length === 1) {
+        trigger = buttons[0];
+      } else if (buttons.length > 1) {
+        trigger = buttons.find(button => button.hasAttribute('aria-haspopup'));
       }
+
+      // For cases like https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ where the combobox
+      // is also the trigger button
+      this._trigger = trigger || this._combobox;
     }
   }
 

package/src/events.ts

@@ -14,6 +14,37 @@ import {act, fireEvent} from '@testing-library/react';
 import {UserOpts} from './types';
 
 export const DEFAULT_LONG_PRESS_TIME = 500;
+function testPlatform(re: RegExp) {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator['userAgentData']?.platform || window.navigator.platform)
+    : false;
+}
+
+function cached(fn: () => boolean) {
+  if (process.env.NODE_ENV === 'test') {
+    return fn;
+  }
+
+  let res: boolean | null = null;
+  return () => {
+    if (res == null) {
+      res = fn();
+    }
+    return res;
+  };
+}
+
+const isMac = cached(function () {
+  return testPlatform(/^Mac/i);
+});
+
+export function getAltKey(): 'Alt' | 'ControlLeft' {
+  return isMac() ? 'Alt' : 'ControlLeft';
+}
+
+export function getMetaKey(): 'MetaLeft' | 'ControlLeft' {
+  return isMac() ? 'MetaLeft' : 'ControlLeft';
+}
 
 /**
  * Simulates a "long press" event on a element.
@@ -58,9 +89,10 @@ export async function triggerLongPress(opts: {element: HTMLElement, advanceTimer
 }
 
 // Docs cannot handle the types that userEvent actually declares, so hopefully this sub set is okay
-export async function pressElement(user: {click: (element: Element) => Promise<void>, keyboard: (keys: string) => Promise<void>, pointer: (opts: {target: Element, keys: string}) => Promise<void>}, element: HTMLElement, interactionType: UserOpts['interactionType']): Promise<void> {
+export async function pressElement(user: {click: (element: Element) => Promise<void>, keyboard: (keys: string) => Promise<void>, pointer: (opts: {target: Element, keys: string, coords?: any}) => Promise<void>}, element: HTMLElement, interactionType: UserOpts['interactionType']): Promise<void> {
   if (interactionType === 'mouse') {
-    await user.click(element);
+    // Add coords with pressure so this isn't detected as a virtual click
+    await user.pointer({target: element, keys: '[MouseLeft]', coords: {pressure: .5}});
   } else if (interactionType === 'keyboard') {
     // TODO: For the keyboard flow, I wonder if it would be reasonable to just do fireEvent directly on the obtained row node or if we should
     // stick to simulting an actual user's keyboard operations as closely as possible

package/src/gridlist.ts

@@ -11,8 +11,8 @@
  */
 
 import {act, within} from '@testing-library/react';
+import {getAltKey, getMetaKey, pressElement, triggerLongPress} from './events';
 import {GridListTesterOpts, GridRowActionOpts, ToggleGridRowOpts, UserOpts} from './types';
-import {pressElement, triggerLongPress} from './events';
 
 interface GridListToggleRowOpts extends ToggleGridRowOpts {}
 interface GridListRowActionOpts extends GridRowActionOpts {}
@@ -57,20 +57,21 @@ export class GridListTester {
   }
 
   // TODO: RTL
-  private async keyboardNavigateToRow(opts: {row: HTMLElement}) {
-    let {row} = opts;
+  private async keyboardNavigateToRow(opts: {row: HTMLElement, selectionOnNav?: 'default' | 'none'}) {
+    let {row, selectionOnNav = 'default'} = opts;
+    let altKey = getAltKey();
     let rows = this.rows;
     let targetIndex = rows.indexOf(row);
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the gridlist');
     }
 
-    if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) {
+    if (document.activeElement !== this._gridlist && !this._gridlist.contains(document.activeElement)) {
       act(() => this._gridlist.focus());
     }
 
     if (document.activeElement === this._gridlist) {
-      await this.user.keyboard('[ArrowDown]');
+      await this.user.keyboard(`${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`);
     } else if (this._gridlist.contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {
       do {
         await this.user.keyboard('[ArrowLeft]');
@@ -82,22 +83,33 @@ export class GridListTester {
     }
     let direction = targetIndex > currIndex ? 'down' : 'up';
 
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[${altKey}>]`);
+    }
     for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {
       await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
     }
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[/${altKey}]`);
+    }
   };
 
   /**
    * Toggles the selection for the specified gridlist row. Defaults to using the interaction type set on the gridlist tester.
+   * Note that this will endevor to always add/remove JUST the provided row to the set of selected rows.
    */
   async toggleRowSelection(opts: GridListToggleRowOpts): Promise<void> {
     let {
       row,
       needsLongPress,
       checkboxSelection = true,
-      interactionType = this._interactionType
+      interactionType = this._interactionType,
+      selectionBehavior = 'toggle'
     } = opts;
 
+    let altKey = getAltKey();
+    let metaKey = getMetaKey();
+
     if (typeof row === 'string' || typeof row === 'number') {
       row = this.findRow({rowIndexOrText: row});
     }
@@ -116,9 +128,15 @@ export class GridListTester {
 
     // this would be better than the check to do nothing in events.ts
     // also, it'd be good to be able to trigger selection on the row instead of having to go to the checkbox directly
-    if (interactionType === 'keyboard' && !checkboxSelection) {
-      await this.keyboardNavigateToRow({row});
-      await this.user.keyboard('{Space}');
+    if (interactionType === 'keyboard' && (!checkboxSelection || !rowCheckbox)) {
+      await this.keyboardNavigateToRow({row, selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'});
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[${altKey}>]`);
+      }
+      await this.user.keyboard('[Space]');
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[/${altKey}]`);
+      }
       return;
     }
     if (rowCheckbox && checkboxSelection) {
@@ -132,9 +150,14 @@ export class GridListTester {
 
         // Note that long press interactions with rows is strictly touch only for grid rows
         await triggerLongPress({element: cell, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});
-
       } else {
-        await pressElement(this.user, cell, interactionType);
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[${metaKey}>]`);
+        }
+        await pressElement(this.user, row, interactionType);
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[/${metaKey}]`);
+        }
       }
     }
   }
@@ -166,7 +189,7 @@ export class GridListTester {
         return;
       }
 
-      await this.keyboardNavigateToRow({row});
+      await this.keyboardNavigateToRow({row, selectionOnNav: 'none'});
       await this.user.keyboard('[Enter]');
     } else {
       await pressElement(this.user, row, interactionType);

package/src/listbox.ts

@@ -11,8 +11,8 @@
  */
 
 import {act, within} from '@testing-library/react';
+import {getAltKey, getMetaKey, pressElement, triggerLongPress} from './events';
 import {ListBoxTesterOpts, UserOpts} from './types';
-import {pressElement, triggerLongPress} from './events';
 
 interface ListBoxToggleOptionOpts {
   /**
@@ -31,7 +31,16 @@ interface ListBoxToggleOptionOpts {
   /**
    * Whether the option needs to be long pressed to be selected. Depends on the listbox's implementation.
    */
-  needsLongPress?: boolean
+  needsLongPress?: boolean,
+  /**
+   * Whether the listbox has a selectionBehavior of "toggle" or "replace" (aka highlight selection). This affects the user operations
+   * required to toggle option selection by adding modifier keys during user actions, useful when performing multi-option selection in a "selectionBehavior: 'replace'" listbox.
+   * If you would like to still simulate user actions (aka press) without these modifiers keys for a "selectionBehavior: replace" listbox, simply omit this option.
+   * See the [RAC Listbox docs](https://react-spectrum.adobe.com/react-aria/ListBox.html#selection-behavior) for more info on this behavior.
+   *
+   * @default 'toggle'
+   */
+    selectionBehavior?: 'toggle' | 'replace'
 }
 
 interface ListBoxOptionActionOpts extends Omit<ListBoxToggleOptionOpts, 'keyboardActivation' | 'needsLongPress'> {
@@ -85,44 +94,51 @@ export class ListBoxTester {
 
   // TODO: this is basically the same as menu except for the error message, refactor later so that they share
   // TODO: this also doesn't support grid layout yet
-  private async keyboardNavigateToOption(opts: {option: HTMLElement}) {
-    let {option} = opts;
+  private async keyboardNavigateToOption(opts: {option: HTMLElement, selectionOnNav?: 'default' | 'none'}) {
+    let {option, selectionOnNav = 'default'} = opts;
+    let altKey = getAltKey();
     let options = this.options();
     let targetIndex = options.indexOf(option);
     if (targetIndex === -1) {
       throw new Error('Option provided is not in the listbox');
     }
 
-    if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
+    if (document.activeElement !== this._listbox && !this._listbox.contains(document.activeElement)) {
       act(() => this._listbox.focus());
-    }
-
-    await this.user.keyboard('[ArrowDown]');
-
-    // TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,
-    // feels like it could break easily
-    if (document.activeElement?.getAttribute('role') !== 'option') {
-      await act(async () => {
-        option.focus();
-      });
+      await this.user.keyboard(`${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`);
     }
 
     let currIndex = options.indexOf(document.activeElement as HTMLElement);
     if (currIndex === -1) {
       throw new Error('ActiveElement is not in the listbox');
     }
-    let direction = targetIndex > currIndex ? 'down' : 'up';
 
+    let direction = targetIndex > currIndex ? 'down' : 'up';
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[${altKey}>]`);
+    }
     for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {
       await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
     }
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[/${altKey}]`);
+    }
   };
 
   /**
    * Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
    */
   async toggleOptionSelection(opts: ListBoxToggleOptionOpts): Promise<void> {
-    let {option, needsLongPress, keyboardActivation = 'Enter', interactionType = this._interactionType} = opts;
+    let {
+      option,
+      needsLongPress,
+      keyboardActivation = 'Enter',
+      interactionType = this._interactionType,
+      selectionBehavior = 'toggle'
+    } = opts;
+
+    let altKey = getAltKey();
+    let metaKey = getMetaKey();
 
     if (typeof option === 'string' || typeof option === 'number') {
       option = this.findOption({optionIndexOrText: option});
@@ -137,8 +153,14 @@ export class ListBoxTester {
         return;
       }
 
-      await this.keyboardNavigateToOption({option});
+      await this.keyboardNavigateToOption({option, selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'});
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[${altKey}>]`);
+      }
       await this.user.keyboard(`[${keyboardActivation}]`);
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[/${altKey}]`);
+      }
     } else {
       if (needsLongPress && interactionType === 'touch') {
         if (this._advanceTimer == null) {
@@ -147,7 +169,13 @@ export class ListBoxTester {
 
         await triggerLongPress({element: option, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});
       } else {
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[${metaKey}>]`);
+        }
         await pressElement(this.user, option, interactionType);
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[/${metaKey}]`);
+        }
       }
     }
   }
@@ -177,7 +205,7 @@ export class ListBoxTester {
         return;
       }
 
-      await this.keyboardNavigateToOption({option});
+      await this.keyboardNavigateToOption({option, selectionOnNav: 'none'});
       await this.user.keyboard('[Enter]');
     } else {
       await pressElement(this.user, option, interactionType);

package/src/menu.ts

@@ -215,7 +215,7 @@ export class MenuTester {
           return;
         }
 
-        if (document.activeElement !== menu || !menu.contains(document.activeElement)) {
+        if (document.activeElement !== menu && !menu.contains(document.activeElement)) {
           act(() => menu.focus());
         }
 

package/src/select.ts

@@ -37,11 +37,17 @@ export class SelectTester {
     this.user = user;
     this._interactionType = interactionType || 'mouse';
     // Handle case where the wrapper element is provided rather than the Select's button (aka RAC)
-    let triggerButton = within(root).queryByRole('button');
-    if (triggerButton == null) {
+    let buttons = within(root).queryAllByRole('button');
+    let triggerButton;
+    if (buttons.length === 0) {
       triggerButton = root;
+    } else if (buttons.length === 1) {
+      triggerButton = buttons[0];
+    } else {
+      triggerButton = buttons.find(button => button.hasAttribute('aria-haspopup'));
     }
-    this._trigger = triggerButton;
+
+    this._trigger = triggerButton ?? root;
   }
   /**
    * Set the interaction type used by the select tester.
@@ -183,7 +189,7 @@ export class SelectTester {
           return;
         }
 
-        if (document.activeElement !== listbox || !listbox.contains(document.activeElement)) {
+        if (document.activeElement !== listbox && !listbox.contains(document.activeElement)) {
           act(() => listbox.focus());
         }
         await this.keyboardNavigateToOption({option});

package/src/table.ts

@@ -11,8 +11,8 @@
  */
 
 import {act, waitFor, within} from '@testing-library/react';
+import {getAltKey, getMetaKey, pressElement, triggerLongPress} from './events';
 import {GridRowActionOpts, TableTesterOpts, ToggleGridRowOpts, UserOpts} from './types';
-import {pressElement, triggerLongPress} from './events';
 
 interface TableToggleRowOpts extends ToggleGridRowOpts {}
 interface TableToggleSortOpts {
@@ -54,6 +54,55 @@ export class TableTester {
     this._interactionType = type;
   }
 
+  // TODO: RTL
+  private async keyboardNavigateToRow(opts: {row: HTMLElement, selectionOnNav?: 'default' | 'none'}) {
+    let {row, selectionOnNav = 'default'} = opts;
+    let altKey = getAltKey();
+    let rows = this.rows;
+    let targetIndex = rows.indexOf(row);
+    if (targetIndex === -1) {
+      throw new Error('Row provided is not in the table');
+    }
+
+    // Move focus into the table
+    if (document.activeElement !== this._table && !this._table.contains(document.activeElement)) {
+      act(() => this._table.focus());
+    }
+
+    if (document.activeElement === this._table) {
+      await this.user.keyboard('[ArrowDown]');
+    }
+
+    // If focus is currently somewhere in the first row group (aka on a column), we want to keyboard navigate downwards till we reach the rows
+    if (this.rowGroups[0].contains(document.activeElement)) {
+      do {
+        await this.user.keyboard('[ArrowDown]');
+      } while (!this.rowGroups[1].contains(document.activeElement));
+    }
+
+    // Move focus onto the row itself
+    if (this.rowGroups[1].contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {
+      do {
+        await this.user.keyboard('[ArrowLeft]');
+      } while (document.activeElement!.getAttribute('role') !== 'row');
+    }
+    let currIndex = rows.indexOf(document.activeElement as HTMLElement);
+    if (currIndex === -1) {
+      throw new Error('Current active element is not on any of the table rows');
+    }
+    let direction = targetIndex > currIndex ? 'down' : 'up';
+
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[${altKey}>]`);
+    }
+    for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {
+      await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
+    }
+    if (selectionOnNav === 'none') {
+      await this.user.keyboard(`[/${altKey}]`);
+    }
+  };
+
   /**
    * Toggles the selection for the specified table row. Defaults to using the interaction type set on the table tester.
    */
@@ -62,9 +111,13 @@ export class TableTester {
       row,
       needsLongPress,
       checkboxSelection = true,
-      interactionType = this._interactionType
+      interactionType = this._interactionType,
+      selectionBehavior = 'toggle'
     } = opts;
 
+    let altKey = getMetaKey();
+    let metaKey = getMetaKey();
+
     if (typeof row === 'string' || typeof row === 'number') {
       row = this.findRow({rowIndexOrText: row});
     }
@@ -75,12 +128,15 @@ export class TableTester {
 
     let rowCheckbox = within(row).queryByRole('checkbox');
 
-    if (interactionType === 'keyboard' && !checkboxSelection) {
-      // TODO: for now focus the row directly until I add keyboard navigation
-      await act(async () => {
-        row.focus();
-      });
-      await this.user.keyboard('{Space}');
+    if (interactionType === 'keyboard' && (!checkboxSelection || !rowCheckbox)) {
+      await this.keyboardNavigateToRow({row, selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'});
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[${altKey}>]`);
+      }
+      await this.user.keyboard('[Space]');
+      if (selectionBehavior === 'replace') {
+        await this.user.keyboard(`[/${altKey}]`);
+      }
       return;
     }
     if (rowCheckbox && checkboxSelection) {
@@ -95,7 +151,13 @@ export class TableTester {
         // Note that long press interactions with rows is strictly touch only for grid rows
         await triggerLongPress({element: cell, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});
       } else {
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[${metaKey}>]`);
+        }
         await pressElement(this.user, cell, interactionType);
+        if (selectionBehavior === 'replace' && interactionType !== 'touch') {
+          await this.user.keyboard(`[/${metaKey}]`);
+        }
       }
     }
   };
@@ -297,8 +359,7 @@ export class TableTester {
     if (needsDoubleClick) {
       await this.user.dblClick(row);
     } else if (interactionType === 'keyboard') {
-      // TODO: add keyboard navigation instead of focusing the row directly. Will need to consider if the focus in in the columns
-      act(() => row.focus());
+      await this.keyboardNavigateToRow({row, selectionOnNav: 'none'});
       await this.user.keyboard('[Enter]');
     } else {
       await pressElement(this.user, row, interactionType);

package/src/tabs.ts

@@ -137,7 +137,7 @@ export class TabsTester {
     }
 
     if (interactionType === 'keyboard') {
-      if (document.activeElement !== this._tablist || !this._tablist.contains(document.activeElement)) {
+      if (document.activeElement !== this._tablist && !this._tablist.contains(document.activeElement)) {
         act(() => this._tablist.focus());
       }