PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix roving tab index crash compareDocumentPosition (#12594)

Browse source 
* Fix roving tab index crash `compareDocumentPosition`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-06-11 10:11:52 +01:00 committed by GitHub
parent 3e7511cc5d
commit 930b4e2424
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/accessibility/RovingTabIndex.tsx
View file

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

5
test/accessibility/RovingTabIndex-test.tsx
View file

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

6
test/components/views/emojipicker/EmojiPicker-test.tsx
View file

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