fix keyboard navigation if row is disabled

packages/@react-aria/test-utils/src/gridlist.ts

@@ -62,7 +62,7 @@ export class GridListTester {
     let rows = this.rows;
     let targetIndex = rows.indexOf(row);
     if (targetIndex === -1) {
-      throw new Error('Option provided is not in the tree');
+      throw new Error('Option provided is not in the gridlist');
     }
     if (document.activeElement === this._gridlist) {
       await this.user.keyboard('[ArrowDown]');
@@ -73,7 +73,7 @@ export class GridListTester {
     }
     let currIndex = rows.indexOf(document.activeElement as HTMLElement);
     if (currIndex === -1) {
-      throw new Error('ActiveElement is not in the tree');
+      throw new Error('ActiveElement is not in the gridlist');
     }
     let direction = targetIndex > currIndex ? 'down' : 'up';
 
@@ -103,8 +103,9 @@ export class GridListTester {
 
     let rowCheckbox = within(row).queryByRole('checkbox');
 
-    // Would be nice to get rid of this check
-    if (rowCheckbox?.getAttribute('disabled') === '') {
+    // TODO: we early return here because the checkbox/row can't be keyboard navigated to if the row is disabled usually
+    // but we may to check for disabledBehavior (aka if the disable row gets skipped when keyboard navigating or not)
+    if (interactionType === 'keyboard' && (rowCheckbox?.getAttribute('disabled') === '' || row?.getAttribute('aria-disabled') === 'true')) {
       return;
     }
 
@@ -156,6 +157,10 @@ export class GridListTester {
     if (needsDoubleClick) {
       await this.user.dblClick(row);
     } else if (interactionType === 'keyboard') {
+      if (row?.getAttribute('aria-disabled') === 'true') {
+        return;
+      }
+
       if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) {
         act(() => this._gridlist.focus());
       }

packages/@react-aria/test-utils/src/listbox.ts

@@ -131,6 +131,10 @@ export class ListBoxTester {
     }
 
     if (interactionType === 'keyboard') {
+      if (option?.getAttribute('aria-disabled') === 'true') {
+        return;
+      }
+
       if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
         act(() => this._listbox.focus());
       }
@@ -171,6 +175,10 @@ export class ListBoxTester {
     if (needsDoubleClick) {
       await this.user.dblClick(option);
     } else if (interactionType === 'keyboard') {
+      if (option?.getAttribute('aria-disabled') === 'true') {
+        return;
+      }
+
       if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {
         act(() => this._listbox.focus());
       }

packages/@react-aria/test-utils/src/menu.ts

@@ -209,6 +209,10 @@ export class MenuTester {
       }
 
       if (interactionType === 'keyboard') {
+        if (option?.getAttribute('aria-disabled') === 'true') {
+          return;
+        }
+
         if (document.activeElement !== menu || !menu.contains(document.activeElement)) {
           act(() => menu.focus());
         }

packages/@react-aria/test-utils/src/select.ts

@@ -179,6 +179,10 @@ export class SelectTester {
       }
 
       if (interactionType === 'keyboard') {
+        if (option?.getAttribute('aria-disabled') === 'true') {
+          return;
+        }
+
         if (document.activeElement !== listbox || !listbox.contains(document.activeElement)) {
           act(() => listbox.focus());
         }

packages/@react-aria/test-utils/src/tree.ts

@@ -41,7 +41,7 @@ export class TreeTester {
   /**
    * Set the interaction type used by the tree tester.
    */
-  setInteractionType = (type: UserOpts['interactionType']) => {
+  setInteractionType(type: UserOpts['interactionType']) {
     this._interactionType = type;
   };
 
@@ -110,8 +110,9 @@ export class TreeTester {
 
     let rowCheckbox = within(row).queryByRole('checkbox');
 
-    // TODO: investigagte why pressElement on a disabled checkbox is still toggling row selection in single selection
-    if (rowCheckbox?.getAttribute('disabled') === '') {
+    // TODO: we early return here because the checkbox can't be keyboard navigated to if the row is disabled usually
+    // but we may to check for disabledBehavior (aka if the disable row gets skipped when keyboard navigating or not)
+    if (interactionType === 'keyboard' && (rowCheckbox?.getAttribute('disabled') === '' || row?.getAttribute('aria-disabled') === 'true')) {
       return;
     }
 
@@ -167,6 +168,10 @@ export class TreeTester {
       let rowExpander = within(row).getAllByRole('button')[0]; // what happens if the button is not first? how can we differentiate?
       await pressElement(this.user, rowExpander, interactionType);
     } else if (interactionType === 'keyboard') {
+      if (row?.getAttribute('aria-disabled') === 'true') {
+        return;
+      }
+
       await this.keyboardNavigateToRow({row});
       if (row.getAttribute('aria-expanded') === 'true') {
         await this.user.keyboard('[ArrowLeft]');
@@ -197,6 +202,10 @@ export class TreeTester {
     if (needsDoubleClick) {
       await this.user.dblClick(row);
     } else if (interactionType === 'keyboard') {
+      if (row?.getAttribute('aria-disabled') === 'true') {
+        return;
+      }
+
       if (document.activeElement !== this._tree || !this._tree.contains(document.activeElement)) {
         act(() => this._tree.focus());
       }
@@ -211,7 +220,7 @@ export class TreeTester {
   /**
    * Returns the tree.
    */
-  get tree() {
+  get tree():  HTMLElement {
     return this._tree;
   }
 

packages/react-aria-components/stories/GridList.stories.tsx

@@ -45,7 +45,7 @@ export const GridListExample = (args) => (
   </GridList>
 );
 
-export const MyGridListItem = (props: GridListItemProps) => {
+const MyGridListItem = (props: GridListItemProps) => {
   return (
     <GridListItem
       {...props}