From b777174cd61d29fe1ebce1d7de5bd25dfed62e69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 9 Jul 2024 18:41:13 -0500
Subject: [PATCH 1/4] fix(@clayui/modal): move focus to h1

---
 packages/clay-modal/src/Header.tsx | 1 +
 packages/clay-modal/src/Modal.tsx  | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/clay-modal/src/Header.tsx b/packages/clay-modal/src/Header.tsx
index e4c9c5d176..df482764c8 100644
--- 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
index 94f068a3bb..a7dfa46a89 100644
--- a/packages/clay-modal/src/Modal.tsx
+++ b/packages/clay-modal/src/Modal.tsx
@@ -117,7 +117,13 @@ 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]);
 

From b2a5eebc94df89e31e943dff4571c49116effa32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 9 Jul 2024 18:44:22 -0500
Subject: [PATCH 2/4] chore(@clayui/modal): regen snapshot

---
 .../__tests__/__snapshots__/IncrementalInteractions.tsx.snap   | 1 +
 packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/packages/clay-modal/src/__tests__/__snapshots__/IncrementalInteractions.tsx.snap b/packages/clay-modal/src/__tests__/__snapshots__/IncrementalInteractions.tsx.snap
index 7a827cc2b9..4ebe3b12c1 100644
--- 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
index 99aacda7b1..a220958605 100644
--- 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>

From ca08c6af1059002bb21bd08edb86ffc91b4bba9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 9 Jul 2024 19:01:20 -0500
Subject: [PATCH 3/4] chore(@clayui/modal): sf

---
 packages/clay-modal/src/Modal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/clay-modal/src/Modal.tsx b/packages/clay-modal/src/Modal.tsx
index a7dfa46a89..dae008de2a 100644
--- a/packages/clay-modal/src/Modal.tsx
+++ b/packages/clay-modal/src/Modal.tsx
@@ -117,7 +117,8 @@ const ClayModal = ({
 
 	useEffect(() => {
 		if (modalBodyElementRef.current && show && content) {
-			const focusedElement = modalBodyElementRef.current.querySelector('h1');
+			const focusedElement =
+				modalBodyElementRef.current.querySelector('h1');
 
 			if (focusedElement) {
 				focusedElement.focus();

From c5637440feeedd6c4037e2453c55fb6302d774af Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 12 Jul 2024 15:20:27 -0700
Subject: [PATCH 4/4] fix(@clayui/css): Modal title shouldn't have focus
 outline when focused via js

---
 packages/clay-css/src/scss/cadmin/components/_modals.scss | 8 +++++++-
 packages/clay-css/src/scss/cadmin/variables/_modals.scss  | 3 +++
 packages/clay-css/src/scss/components/_modals.scss        | 8 +++++++-
 packages/clay-css/src/scss/variables/_modals.scss         | 3 +++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/clay-css/src/scss/cadmin/components/_modals.scss b/packages/clay-css/src/scss/cadmin/components/_modals.scss
index 15b33923e2..62172f629a 100644
--- 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
index c4089f97f5..fb059b470e 100644
--- 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
index d64c6a763c..bbe8565568 100644
--- 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
index 5736ace27e..dea8e16b75 100644
--- 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,