12768023900

Committed 14 Jan 2025 12:51PM UTC coverage: 82.267% (-9.7%) from 91.979%

Build # 12768023900

Build Type

Pull #544

github

Committed by

web-flow

Commit Message

Merge 2514fd74a into 684d5abff

Pull Request Pull Request #544: Re-implement `Modal` component using HTMLDialogElement (#461)

Run Details

743 of 905 branches covered (82.1%)

Branch coverage included in aggregate %.

4 of 58 new or added lines in 7 files covered. (6.9%)

35 existing lines in 5 files now uncovered.

658 of 798 relevant lines covered (82.46%)

63.38 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

2.78

/src/components/Modal/_hooks/useModalFocus.js

1	import { useEffect } from 'react';
2
3	export const useModalFocus = (	4✔
4	autoFocus,
5	dialogRef,
6	primaryButtonRef,
7	) => {
UNCOV 8	useEffect(	×
9	() => {
10	// Following code finds all focusable elements and among them first not disabled form
11	// field element (input, textarea or select) or primary button and focuses it. This is
12	// necessary to have focus on one of those elements to be able to submit the form
13	// by pressing Enter key. If there are neither, it tries to focus any other focusable
14	// elements. In case there are none or `autoFocus` is disabled, dialogElement
15	// (Modal itself) is focused.
16
NEW 17	const dialogElement = dialogRef.current;	×
18
NEW 19	if (dialogElement == null) {	×
20	return () => {};	×
21	}
22
UNCOV 23	const childrenFocusableElements = Array.from(	×
24	dialogElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
25	);
26
UNCOV 27	const firstFocusableElement = childrenFocusableElements[0];	×
28
NEW 29	if (!autoFocus \|\| childrenFocusableElements.length === 0) {	×
NEW 30	dialogElement.tabIndex = -1;	×
NEW 31	dialogElement.focus();	×
NEW 32	return () => {};	×
33	}
34
NEW 35	const firstFormFieldEl = childrenFocusableElements.find(	×
NEW 36	(element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) && !element.disabled,	×
37	);
38
NEW 39	if (firstFormFieldEl) {	×
NEW 40	firstFormFieldEl.focus();	×
NEW 41	return () => {};	×
42	}
43
NEW 44	if (primaryButtonRef?.current != null && primaryButtonRef?.current?.disabled === false) {	×
NEW 45	primaryButtonRef.current.focus();	×
NEW 46	return () => {};	×
47	}
48
NEW 49	firstFocusableElement.focus();	×
50
NEW 51	return () => {};	×
52	},
53	[
54	autoFocus,
55	dialogRef,
56	primaryButtonRef,
57	],
58	);
59	};

react-ui-org / react-ui / 12768023900

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous