From b9fe8b5883dd44d4ce7fb3c124fd8c34ba06b2ff Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 23 May 2023 14:07:01 -0700
Subject: [PATCH 1/6] Fix conditional readonly aria-describedby

- it was wrapped around the wrong SR text
---
 .../inline_edit_form.test.tsx.snap            |  4 +---
 .../inline_edit_text.test.tsx.snap            |  4 +---
 .../inline_edit_title.test.tsx.snap           |  4 +---
 .../inline_edit/inline_edit_form.tsx          | 21 +++++++++----------
 4 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
index 1cb43f93a8d..4e8db2e6eb0 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -667,9 +667,7 @@ exports[`EuiInlineEditForm Read Mode isReadOnly 1`] = `
   <span
     hidden=""
     id="inlineEdit_generated-id"
-  >
-    Click to edit this text inline.
-  </span>
+  />
 </div>
 `;
 
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
index c3e7dcba701..c5d30da1fe7 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
@@ -29,9 +29,7 @@ exports[`EuiInlineEditText isReadOnly 1`] = `
   <span
     hidden=""
     id="inlineEdit_generated-id"
-  >
-    Click to edit this text inline.
-  </span>
+  />
 </div>
 `;
 
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
index 393e8d316f1..370fcc13d26 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
@@ -30,9 +30,7 @@ exports[`EuiInlineEditTitle isReadOnly 1`] = `
   <span
     hidden=""
     id="inlineEdit_generated-id"
-  >
-    Click to edit this text inline.
-  </span>
+  />
 </div>
 `;
 
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 9806fab5d15..068bae3ed6d 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -249,14 +249,11 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
             )}
           />
         </EuiFormRow>
-
         <span id={editModeDescribedById} hidden>
-          {!isReadOnly && (
-            <EuiI18n
-              token="euiInlineEditForm.inputKeyboardInstructions"
-              default="Press Enter to save your edited text. Press Escape to cancel your edit."
-            />
-          )}
+          <EuiI18n
+            token="euiInlineEditForm.inputKeyboardInstructions"
+            default="Press Enter to save your edited text. Press Escape to cancel your edit."
+          />
         </span>
       </EuiFlexItem>
 
@@ -342,10 +339,12 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
         {children(readModeValue)}
       </EuiButtonEmpty>
       <span id={readModeDescribedById} hidden>
-        <EuiI18n
-          token="euiInlineEditForm.activateEditModeDescription"
-          default="Click to edit this text inline."
-        />
+        {!isReadOnly && (
+          <EuiI18n
+            token="euiInlineEditForm.activateEditModeDescription"
+            default="Click to edit this text inline."
+          />
+        )}
       </span>
     </>
   );

From f8ba007d8fc3054d16fe8c9edb5c629da9ab7838 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 23 May 2023 14:12:24 -0700
Subject: [PATCH 2/6] Prevent double heading roles when readonly

- leave role as undefined/unset otherwise, as `span` elements should not have a `heading` role
---
 .../inline_edit/__snapshots__/inline_edit_title.test.tsx.snap | 1 +
 src/components/inline_edit/inline_edit_title.tsx              | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
index 370fcc13d26..1db0a616d9a 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`EuiInlineEditTitle isReadOnly 1`] = `
       >
         <h1
           class="euiTitle eui-textTruncate emotion-euiTitle-m"
+          role="presentation"
         >
           Hello World!
         </h1>
diff --git a/src/components/inline_edit/inline_edit_title.tsx b/src/components/inline_edit/inline_edit_title.tsx
index 451cd1a4697..ffa1b7ea077 100644
--- a/src/components/inline_edit/inline_edit_title.tsx
+++ b/src/components/inline_edit/inline_edit_title.tsx
@@ -96,7 +96,9 @@ export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps> = ({
     >
       {(titleReadModeValue) => (
         <EuiTitle size={size} className="eui-textTruncate">
-          <H>{titleReadModeValue}</H>
+          <H role={isReadOnly ? 'presentation' : undefined}>
+            {titleReadModeValue}
+          </H>
         </EuiTitle>
       )}
     </EuiInlineEditForm>

From bd4118c7e2fef193edf134eb16f5adb6bc50661b Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 23 May 2023 14:28:55 -0700
Subject: [PATCH 3/6] (hopefully) Fix enter screen reader behavior

---
 src/components/inline_edit/inline_edit_form.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 068bae3ed6d..d9f812d9742 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -201,6 +201,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   const editModeInputOnKeyDown = (event: KeyboardEvent<HTMLElement>) => {
     switch (event.key) {
       case keys.ENTER:
+        event.preventDefault(); // Enter keypresses will not proceed otherwise on webkit browsers & screen readers
         saveInlineEditValue();
         break;
       case keys.ESCAPE:

From 0f483bd24dc68d5342c7aab1c3acd83cbd93d982 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 23 May 2023 14:46:27 -0700
Subject: [PATCH 4/6] Fix VO announcing EuiInlineEditText as `clickable` in
 read only mode

---
 src/components/inline_edit/inline_edit_form.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index d9f812d9742..387c529ad94 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -332,10 +332,15 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
           readModeDescribedById,
           readModeProps?.['aria-describedby']
         )}
-        onClick={(e: MouseEvent<HTMLButtonElement>) => {
-          activateEditMode();
-          readModeProps?.onClick?.(e);
-        }}
+        onClick={
+          // `undefined` prevents screen readers from announcing "clickable" when the button is readonly
+          !isReadOnly
+            ? (e: MouseEvent<HTMLButtonElement>) => {
+                activateEditMode();
+                readModeProps?.onClick?.(e);
+              }
+            : undefined
+        }
       >
         {children(readModeValue)}
       </EuiButtonEmpty>

From 9cbb8a2f7f7b38e5397f67f2aaf3db9b8cd94085 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 24 May 2023 17:57:35 -0700
Subject: [PATCH 5/6] Revert "Fix VO announcing EuiInlineEditText as
 `clickable` in read only mode"

This reverts commit 0f483bd24dc68d5342c7aab1c3acd83cbd93d982.
---
 src/components/inline_edit/inline_edit_form.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 387c529ad94..d9f812d9742 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -332,15 +332,10 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
           readModeDescribedById,
           readModeProps?.['aria-describedby']
         )}
-        onClick={
-          // `undefined` prevents screen readers from announcing "clickable" when the button is readonly
-          !isReadOnly
-            ? (e: MouseEvent<HTMLButtonElement>) => {
-                activateEditMode();
-                readModeProps?.onClick?.(e);
-              }
-            : undefined
-        }
+        onClick={(e: MouseEvent<HTMLButtonElement>) => {
+          activateEditMode();
+          readModeProps?.onClick?.(e);
+        }}
       >
         {children(readModeValue)}
       </EuiButtonEmpty>

From 3c4deb3929946c4ea8e14cc2f23a0e45cb3333f8 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 24 May 2023 18:00:10 -0700
Subject: [PATCH 6/6] NVDA browser mode fix

---
 src/components/inline_edit/inline_edit_form.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index d9f812d9742..b0df19e44e9 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -205,6 +205,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
         saveInlineEditValue();
         break;
       case keys.ESCAPE:
+        event.preventDefault(); // NVDA will trigger Browse mode otherwise
         cancelInlineEdit();
         break;
     }