self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-24 08:52:28 +02:00
Code Issues Releases Activity

fix(web): focus trap inside portal (#11797)

Browse Source 
* fix(web): focus trap inside portal

* fix tests
This commit is contained in:
Michel Heusschen 2024-08-15 10:36:29 +02:00 committed by GitHub
parent f7bfde6a32
commit fa64277476
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/lib/actions/__test__/focus-trap.spec.ts
View File

@ -6,19 +6,22 @@ import { tick } from 'svelte';
describe('focusTrap action', () => {
const user = userEvent.setup();
it('sets focus to the first focusable element', () => {
it('sets focus to the first focusable element', async () => {
render(FocusTrapTest, { show: true });
await tick();
expect(document.activeElement).toEqual(screen.getByTestId('one'));
});
it('supports backward focus wrapping', async () => {
render(FocusTrapTest, { show: true });
await tick();
await user.keyboard('{Shift>}{Tab}{/Shift}');
expect(document.activeElement).toEqual(screen.getByTestId('three'));
});
it('supports forward focus wrapping', async () => {
render(FocusTrapTest, { show: true });
await tick();
screen.getByTestId('three').focus();
await user.keyboard('{Tab}');
expect(document.activeElement).toEqual(screen.getByTestId('one'));
@ -28,9 +31,7 @@ describe('focusTrap action', () => {
render(FocusTrapTest, { show: false });
const openButton = screen.getByText('Open');
openButton.focus();
openButton.click();
await tick();
await user.click(openButton);
expect(document.activeElement).toEqual(screen.getByTestId('one'));
screen.getByText('Close').click();

5
web/src/lib/actions/focus-trap.ts
View File

@ -1,4 +1,5 @@
import { shortcuts } from '$lib/actions/shortcut';
import { tick } from 'svelte';
const selectors =
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
@ -7,7 +8,9 @@ export function focusTrap(container: HTMLElement) {
const triggerElement = document.activeElement;
const focusableElement = container.querySelector<HTMLElement>(selectors);
focusableElement?.focus();
// Use tick() to ensure focus trap works correctly inside <Portal />
void tick().then(() => focusableElement?.focus());
const getFocusableElements = (): [HTMLElement | null, HTMLElement | null] => {
const focusableElements = container.querySelectorAll<HTMLElement>(selectors);