Merge pull request #5841 from matuzalemsteles/LPD-31019

fix(@clayui/modal): move focus to h1
liferay · Jul 12, 2024 · 557280f · 557280f
2 parents 38afae6 + c563744
commit 557280f
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 3 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_modals.scss b/packages/clay-css/src/scss/cadmin/components/_modals.scss
@@ -235,7 +235,13 @@
 // Modal Title
 
 .modal-title {
-	@include clay-map-to-css(map-get($cadmin-modal, modal-title));
+	$_modal-title: setter(map-get($cadmin-modal, modal-title), ());
+
+	@include clay-map-to-css($_modal-title);
+
+	&[tabindex='-1'] {
+		@include clay-css(map-get($_modal-title, '[tabindex="-1"]'));
+	}
 
 	@include clay-scale-component {
 		font-size: $cadmin-modal-title-font-size-mobile;

diff --git a/packages/clay-css/src/scss/cadmin/variables/_modals.scss b/packages/clay-css/src/scss/cadmin/variables/_modals.scss
@@ -359,6 +359,9 @@ $cadmin-modal: map-deep-merge(
 			text-align: $cadmin-modal-title-text-align,
 			text-overflow: ellipsis,
 			white-space: nowrap,
+			'[tabindex="-1"]': (
+				outline: 0,
+			),
 		),
 		modal-title-indicator: (
 			display: inline-block,

diff --git a/packages/clay-css/src/scss/components/_modals.scss b/packages/clay-css/src/scss/components/_modals.scss
@@ -244,7 +244,13 @@
 // Modal Title
 
 .modal-title {
-	@include clay-css(map-get($modal, modal-title));
+	$_modal-title: setter(map-get($modal, modal-title), ());
+
+	@include clay-css($_modal-title);
+
+	&[tabindex='-1'] {
+		@include clay-css(map-get($_modal-title, '[tabindex="-1"]'));
+	}
 
 	@include clay-scale-component {
 		font-size: $modal-title-font-size-mobile;

diff --git a/packages/clay-css/src/scss/variables/_modals.scss b/packages/clay-css/src/scss/variables/_modals.scss
@@ -358,6 +358,9 @@ $modal: map-deep-merge(
 			text-align: $modal-title-text-align,
 			text-overflow: ellipsis,
 			white-space: nowrap,
+			'[tabindex="-1"]': (
+				outline: 0,
+			),
 		),
 		modal-title-indicator: (
 			display: inline-block,

diff --git a/packages/clay-modal/src/Header.tsx b/packages/clay-modal/src/Header.tsx
@@ -66,6 +66,7 @@ export const Title = ({
 	return (
 		<h1
 			className={classNames('modal-title', className)}
+			tabIndex={-1}
 			{...otherProps}
 			id={ariaLabelledby}
 		>

diff --git a/packages/clay-modal/src/Modal.tsx b/packages/clay-modal/src/Modal.tsx
@@ -117,7 +117,14 @@ const ClayModal = ({
 
 	useEffect(() => {
 		if (modalBodyElementRef.current && show && content) {
-			modalBodyElementRef.current.focus();
+			const focusedElement =
+				modalBodyElementRef.current.querySelector('h1');
+
+			if (focusedElement) {
+				focusedElement.focus();
+			} else {
+				modalBodyElementRef.current.focus();
+			}
 		}
 	}, [show, content]);
 

diff --git a/packages/clay-modal/src/__tests__/__snapshots__/IncrementalInteractions.tsx.snap b/packages/clay-modal/src/__tests__/__snapshots__/IncrementalInteractions.tsx.snap
@@ -45,6 +45,7 @@ exports[`ModalProvider -> IncrementalInteractions renders a modal when dispatchi
             <h1
               class="modal-title"
               id="clay-modal-label-9"
+              tabindex="-1"
             >
               Title
             </h1>

diff --git a/packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap
@@ -29,6 +29,7 @@ exports[`ClayModal renders 1`] = `
             <h1
               class="modal-title"
               id="clay-modal-label-1"
+              tabindex="-1"
             >
               Foo
             </h1>
@@ -123,6 +124,7 @@ exports[`ClayModal renders Header w/ low-level API 1`] = `
                   <h1
                     class="modal-title"
                     id="clay-modal-label-3"
+                    tabindex="-1"
                   >
                     Modal Title
                   </h1>
@@ -293,6 +295,7 @@ exports[`ClayModal renders with Header 1`] = `
             <h1
               class="modal-title"
               id="clay-modal-label-2"
+              tabindex="-1"
             >
               Foo
             </h1>
-Original file line number
+Diff line change
@@ Expand Up @@
                 <h1
                   class="modal-title"
                   id="clay-modal-label-9"
+                  tabindex="-1"
                 >
                   Title
                 </h1>
@@ Expand Down @@