Fix roving tab index crash compareDocumentPosition (#12594)

* Fix roving tab index crash `compareDocumentPosition`

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

src/accessibility/RovingTabIndex.tsx

@@ -18,7 +18,7 @@ import React, {
     createContext,
     useCallback,
     useContext,
-    useLayoutEffect,
+    useEffect,
     useMemo,
     useRef,
     useReducer,
@@ -144,7 +144,7 @@ export const reducer: Reducer<IState, Action> = (state: IState, action: Action)
                 }
                 if (document.activeElement === document.body) {
                     // if the focus got reverted to the body then the user was likely focused on the unmounted element
-                    state.activeRef?.current?.focus();
+                    setTimeout(() => state.activeRef?.current?.focus(), 0);
                 }
             }
 
@@ -362,7 +362,7 @@ export const useRovingTabIndex = <T extends HTMLElement>(
     }
 
     // setup (after refs)
-    useLayoutEffect(() => {
+    useEffect(() => {
         context.dispatch({
             type: Type.Register,
             payload: { ref },

test/accessibility/RovingTabIndex-test.tsx

@@ -33,10 +33,7 @@ const Button = (props: HTMLAttributes<HTMLButtonElement>) => {
 };
 
 const checkTabIndexes = (buttons: NodeListOf<HTMLElement>, expectations: number[]) => {
-    expect(buttons.length).toBe(expectations.length);
-    for (let i = 0; i < buttons.length; i++) {
-        expect(buttons[i].tabIndex).toBe(expectations[i]);
-    }
+    expect([...buttons].map((b) => b.tabIndex)).toStrictEqual(expectations);
 };
 
 // give the buttons keys for the fibre reconciler to not treat them all as the same

test/components/views/emojipicker/EmojiPicker-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { createRef } from "react";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import EmojiPicker from "../../../../src/components/views/emojipicker/EmojiPicker";
@@ -24,7 +24,7 @@ import { stubClient } from "../../../test-utils";
 describe("EmojiPicker", function () {
     stubClient();
 
-    it("should not mangle default order after filtering", () => {
+    it("should not mangle default order after filtering", async () => {
         const ref = createRef<EmojiPicker>();
         const { container } = render(
             <EmojiPicker ref={ref} onChoose={(str: string) => false} onFinished={jest.fn()} />,
@@ -41,7 +41,7 @@ describe("EmojiPicker", function () {
         // Clear the filter and assert that the HTML matches what it was before filtering
         //@ts-ignore private access
         ref.current!.onChangeFilter("");
-        expect(beforeHtml).toEqual(container.innerHTML);
+        await waitFor(() => expect(beforeHtml).toEqual(container.innerHTML));
     });
 
     it("sort emojis by shortcode and size", function () {