Add option to includeNegativeTabIndex in getFocusableElementsInScope

packages/react-dom/src/events/DOMEventResponderSystem.js

@@ -389,14 +389,20 @@ const eventResponderContext: ReactDOMResponderContext = {
       }
     }
   },
-  getFocusableElementsInScope(): Array<HTMLElement> {
+  getFocusableElementsInScope(
+    includeNegativeTabIndex: boolean,
+  ): Array<HTMLElement> {
     validateResponderContext();
     const focusableElements = [];
     const eventComponentInstance = ((currentInstance: any): ReactDOMEventComponentInstance);
     const child = ((eventComponentInstance.currentFiber: any): Fiber).child;
 
     if (child !== null) {
-      collectFocusableElements(child, focusableElements);
+      collectFocusableElements(
+        child,
+        focusableElements,
+        includeNegativeTabIndex,
+      );
     }
     return focusableElements;
   },
@@ -467,27 +473,40 @@ const eventResponderContext: ReactDOMResponderContext = {
 function collectFocusableElements(
   node: Fiber,
   focusableElements: Array<HTMLElement>,
+  includeNegativeTabIndex: boolean,
 ): void {
   if (isFiberSuspenseAndTimedOut(node)) {
     const fallbackChild = getSuspenseFallbackChild(node);
     if (fallbackChild !== null) {
-      collectFocusableElements(fallbackChild, focusableElements);
+      collectFocusableElements(
+        fallbackChild,
+        focusableElements,
+        includeNegativeTabIndex,
+      );
     }
   } else {
-    if (isFiberHostComponentFocusable(node)) {
+    if (isFiberHostComponentFocusable(node, includeNegativeTabIndex)) {
       focusableElements.push(node.stateNode);
     } else {
       const child = node.child;
 
       if (child !== null) {
-        collectFocusableElements(child, focusableElements);
+        collectFocusableElements(
+          child,
+          focusableElements,
+          includeNegativeTabIndex,
+        );
       }
     }
   }
   const sibling = node.sibling;
 
   if (sibling !== null) {
-    collectFocusableElements(sibling, focusableElements);
+    collectFocusableElements(
+      sibling,
+      focusableElements,
+      includeNegativeTabIndex,
+    );
   }
 }
 
@@ -506,12 +525,18 @@ function releaseOwnershipForEventComponentInstance(
   return false;
 }
 
-function isFiberHostComponentFocusable(fiber: Fiber): boolean {
+function isFiberHostComponentFocusable(
+  fiber: Fiber,
+  includeNegativeTabIndex: boolean,
+): boolean {
   if (fiber.tag !== HostComponent) {
     return false;
   }
   const {type, memoizedProps} = fiber;
-  if (memoizedProps.tabIndex === -1 || memoizedProps.disabled) {
+  if (
+    (!includeNegativeTabIndex && memoizedProps.tabIndex === -1) ||
+    memoizedProps.disabled
+  ) {
     return false;
   }
   if (memoizedProps.tabIndex === 0 || memoizedProps.contentEditable === true) {

packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js

@@ -1128,4 +1128,50 @@ describe('DOMEventResponderSystem', () => {
       'hook 2b',
     ]);
   });
+
+  it('getFocusableElementsInScope works', () => {
+    let includeNegativeTabIndex = false;
+    let focusableElementsInScope = [];
+
+    const EventComponent = createReactEventComponent({
+      targetEventTypes: ['keydown'],
+      onEvent(event, context) {
+        focusableElementsInScope = context.getFocusableElementsInScope(
+          includeNegativeTabIndex,
+        );
+      },
+      allowMultipleHostChildren: true,
+    });
+
+    const buttonProps = [
+      {id: 'button1', ref: React.createRef(), tabIndex: 0},
+      {id: 'button2', ref: React.createRef(), tabIndex: -1},
+      {id: 'button3', ref: React.createRef()},
+      {id: 'button4', ref: React.createRef(), disabled: true},
+    ];
+
+    const Test = () => (
+      <EventComponent>
+        {buttonProps.map((props, index) => <button {...props} key={index} />)}
+      </EventComponent>
+    );
+
+    ReactDOM.render(<Test />, container);
+
+    dispatchEvent(buttonProps[0].ref.current, 'keydown');
+    expect(focusableElementsInScope.length).toBe(2);
+    expect(focusableElementsInScope).toEqual([
+      buttonProps[0].ref.current,
+      buttonProps[2].ref.current,
+    ]);
+
+    includeNegativeTabIndex = true;
+    dispatchEvent(buttonProps[0].ref.current, 'keydown');
+    expect(focusableElementsInScope.length).toBe(3);
+    expect(focusableElementsInScope).toEqual([
+      buttonProps[0].ref.current,
+      buttonProps[1].ref.current,
+      buttonProps[2].ref.current,
+    ]);
+  });
 });

packages/react-events/src/dom/FocusScope.js

@@ -40,7 +40,7 @@ function getFirstFocusableElement(
   context: ReactDOMResponderContext,
   state: FocusScopeState,
 ): ?HTMLElement {
-  const elements = context.getFocusableElementsInScope();
+  const elements = context.getFocusableElementsInScope(false);
   if (elements.length > 0) {
     return elements[0];
   }
@@ -77,7 +77,7 @@ const FocusScopeResponder: ReactDOMEventResponder = {
         if (altkey || ctrlKey || metaKey) {
           return;
         }
-        const elements = context.getFocusableElementsInScope();
+        const elements = context.getFocusableElementsInScope(false);
         const position = elements.indexOf(focusedElement);
         const lastPosition = elements.length - 1;
         let nextElement = null;

packages/shared/ReactDOMTypes.js

@@ -73,7 +73,9 @@ export type ReactDOMResponderContext = {
   releaseOwnership: () => boolean,
   setTimeout: (func: () => void, timeout: number) => number,
   clearTimeout: (timerId: number) => void,
-  getFocusableElementsInScope(): Array<HTMLElement>,
+  getFocusableElementsInScope(
+    includeNegativeTabIndex: boolean,
+  ): Array<HTMLElement>,
   getActiveDocument(): Document,
   objectAssign: Function,
   getEventCurrentTarget(event: ReactDOMResponderEvent): Element,