From 894da9a0a65065913f2ef8027cdab8f615e92915 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 1 May 2023 16:32:08 -0700
Subject: [PATCH 1/7] DOM cleanup

- Remove unnecessary `EuiForm` - we're not taking advantage of form submit behavior, so we might as well remove this

- Remove unnecessary `EuiFormRow`s around save/cancel buttons - they're not inputs and don't need form rows

- Remove incorrect `className={classes}` placement
---
 .../inline_edit_form.test.tsx.snap            | 1264 ++++++++---------
 .../inline_edit/inline_edit_form.tsx          |  175 ++-
 2 files changed, 639 insertions(+), 800 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 3f2a5a14210..c4aa7534b34 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
@@ -5,143 +5,121 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.cancelButtonProps 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <div
-    class="euiForm"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
   >
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFormRow euiFormRow--fullWidth"
+        id="generated-id-row"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout__childrenWrapper"
             >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-describedby="inlineEdit_generated-id"
-                  aria-label="Edit inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
+              <input
+                aria-describedby="inlineEdit_generated-id"
+                aria-label="Edit inline"
+                class="euiFieldText euiFieldText--fullWidth"
+                data-test-subj="euiInlineEditModeInput"
+                id="generated-id"
+                type="text"
+                value="Hello World!"
+              />
             </div>
           </div>
         </div>
-        <span
-          hidden=""
-          id="inlineEdit_generated-id"
-        >
-          Press Enter to save your edited text. Press Escape to cancel your edit.
-        </span>
       </div>
+      <span
+        hidden=""
+        id="inlineEdit_generated-id"
+      >
+        Press Enter to save your edited text. Press Escape to cancel your edit.
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Save edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+          data-test-subj="euiInlineEditModeSaveButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="check"
+          />
+        </button>
       </div>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Uh no. Do not save."
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-disabled"
-                data-test-subj="euiInlineEditModeCancelButton"
-                disabled=""
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Uh no. Do not save."
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-disabled"
+          data-test-subj="euiInlineEditModeCancelButton"
+          disabled=""
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -153,143 +131,121 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.formRowProps 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <div
-    class="euiForm"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
   >
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFormRow euiFormRow--fullWidth"
+        data-test-subj="customErrorText"
+        id="generated-id-row"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          data-test-subj="customErrorText"
-          id="generated-id-row"
+          class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout__childrenWrapper"
             >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-describedby="inlineEdit_generated-id"
-                  aria-label="Edit inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
+              <input
+                aria-describedby="inlineEdit_generated-id"
+                aria-label="Edit inline"
+                class="euiFieldText euiFieldText--fullWidth"
+                data-test-subj="euiInlineEditModeInput"
+                id="generated-id"
+                type="text"
+                value="Hello World!"
+              />
             </div>
           </div>
         </div>
-        <span
-          hidden=""
-          id="inlineEdit_generated-id"
-        >
-          Press Enter to save your edited text. Press Escape to cancel your edit.
-        </span>
       </div>
+      <span
+        hidden=""
+        id="inlineEdit_generated-id"
+      >
+        Press Enter to save your edited text. Press Escape to cancel your edit.
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Save edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+          data-test-subj="euiInlineEditModeSaveButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="check"
+          />
+        </button>
       </div>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Cancel edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+          data-test-subj="euiInlineEditModeCancelButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -301,148 +257,126 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.inputProps 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <div
-    class="euiForm"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
   >
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFormRow euiFormRow--fullWidth"
+        id="generated-id-row"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
           >
+            <label
+              class="euiFormLabel euiFormControlLayout__prepend"
+              for="generated-id"
+            >
+              Prepend Example
+            </label>
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+              class="euiFormControlLayout__childrenWrapper"
             >
-              <label
-                class="euiFormLabel euiFormControlLayout__prepend"
-                for="generated-id"
-              >
-                Prepend Example
-              </label>
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-describedby="inlineEdit_generated-id"
-                  aria-label="Edit inline"
-                  class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                  data-test-subj="customInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
+              <input
+                aria-describedby="inlineEdit_generated-id"
+                aria-label="Edit inline"
+                class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                data-test-subj="customInput"
+                id="generated-id"
+                type="text"
+                value="Hello World!"
+              />
             </div>
           </div>
         </div>
-        <span
-          hidden=""
-          id="inlineEdit_generated-id"
-        >
-          Press Enter to save your edited text. Press Escape to cancel your edit.
-        </span>
       </div>
+      <span
+        hidden=""
+        id="inlineEdit_generated-id"
+      >
+        Press Enter to save your edited text. Press Escape to cancel your edit.
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Save edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+          data-test-subj="euiInlineEditModeSaveButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="check"
+          />
+        </button>
       </div>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Cancel edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+          data-test-subj="euiInlineEditModeCancelButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -454,142 +388,120 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.saveButtonProps 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <div
-    class="euiForm"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
   >
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFormRow euiFormRow--fullWidth"
+        id="generated-id-row"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout__childrenWrapper"
             >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-describedby="inlineEdit_generated-id"
-                  aria-label="Edit inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
+              <input
+                aria-describedby="inlineEdit_generated-id"
+                aria-label="Edit inline"
+                class="euiFieldText euiFieldText--fullWidth"
+                data-test-subj="euiInlineEditModeInput"
+                id="generated-id"
+                type="text"
+                value="Hello World!"
+              />
             </div>
           </div>
         </div>
-        <span
-          hidden=""
-          id="inlineEdit_generated-id"
-        >
-          Press Enter to save your edited text. Press Escape to cancel your edit.
-        </span>
       </div>
+      <span
+        hidden=""
+        id="inlineEdit_generated-id"
+      >
+        Press Enter to save your edited text. Press Escape to cancel your edit.
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Yes! Let's save."
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-primary"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Yes! Let's save."
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-primary"
+          data-test-subj="euiInlineEditModeSaveButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="check"
+          />
+        </button>
       </div>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Cancel edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+          data-test-subj="euiInlineEditModeCancelButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -601,151 +513,129 @@ exports[`EuiInlineEditForm Edit Mode isInvalid 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <div
-    class="euiForm"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
   >
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFormRow euiFormRow--fullWidth"
+        id="generated-id-row"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout__childrenWrapper"
             >
+              <input
+                aria-describedby="inlineEdit_generated-id"
+                aria-invalid="true"
+                aria-label="Edit inline"
+                class="euiFieldText euiFormControlLayout--1icons euiFieldText--fullWidth"
+                data-test-subj="euiInlineEditModeInput"
+                id="generated-id"
+                type="text"
+                value="Hello World!"
+              />
               <div
-                class="euiFormControlLayout__childrenWrapper"
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
               >
-                <input
-                  aria-describedby="inlineEdit_generated-id"
-                  aria-invalid="true"
-                  aria-label="Edit inline"
-                  class="euiFieldText euiFormControlLayout--1icons euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
+                <span
+                  color="danger"
+                  data-euiicon-type="warning"
                 />
-                <div
-                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-                >
-                  <span
-                    color="danger"
-                    data-euiicon-type="warning"
-                  />
-                </div>
               </div>
             </div>
           </div>
         </div>
-        <span
-          hidden=""
-          id="inlineEdit_generated-id"
-        >
-          Press Enter to save your edited text. Press Escape to cancel your edit.
-        </span>
       </div>
+      <span
+        hidden=""
+        id="inlineEdit_generated-id"
+      >
+        Press Enter to save your edited text. Press Escape to cancel your edit.
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Save edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+          data-test-subj="euiInlineEditModeSaveButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="check"
+          />
+        </button>
       </div>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Cancel edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+          data-test-subj="euiInlineEditModeCancelButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -757,105 +647,81 @@ exports[`EuiInlineEditForm Edit Mode isLoading 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <div
-    class="euiForm"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
   >
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFormRow euiFormRow--fullWidth"
+        id="generated-id-row"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout__childrenWrapper"
             >
+              <input
+                aria-describedby="inlineEdit_generated-id"
+                aria-label="Edit inline"
+                class="euiFieldText euiFormControlLayout--1icons euiFieldText--fullWidth euiFieldText-isLoading"
+                data-test-subj="euiInlineEditModeInput"
+                id="generated-id"
+                type="text"
+                value="Hello World!"
+              />
               <div
-                class="euiFormControlLayout__childrenWrapper"
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
               >
-                <input
-                  aria-describedby="inlineEdit_generated-id"
-                  aria-label="Edit inline"
-                  class="euiFieldText euiFormControlLayout--1icons euiFieldText--fullWidth euiFieldText-isLoading"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
+                <span
+                  aria-label="Loading"
+                  class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+                  role="progressbar"
                 />
-                <div
-                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-                >
-                  <span
-                    aria-label="Loading"
-                    class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
-                    role="progressbar"
-                  />
-                </div>
               </div>
             </div>
           </div>
         </div>
-        <span
-          hidden=""
-          id="inlineEdit_generated-id"
-        >
-          Press Enter to save your edited text. Press Escape to cancel your edit.
-        </span>
       </div>
+      <span
+        hidden=""
+        id="inlineEdit_generated-id"
+      >
+        Press Enter to save your edited text. Press Escape to cancel your edit.
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+        aria-busy="true"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="true"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                aria-label="Loading "
-                class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
-                id="generated-id"
-                role="progressbar"
-                style="inline-size: 40px; block-size: 40px;"
-              />
-            </div>
-          </div>
-        </div>
+          aria-label="Loading "
+          class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
+          role="progressbar"
+          style="inline-size: 40px; block-size: 40px;"
+        />
       </div>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        aria-busy="true"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="true"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                aria-label="Loading "
-                class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
-                id="generated-id"
-                role="progressbar"
-                style="inline-size: 40px; block-size: 40px;"
-              />
-            </div>
-          </div>
-        </div>
+          aria-label="Loading "
+          class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
+          role="progressbar"
+          style="inline-size: 40px; block-size: 40px;"
+        />
       </div>
     </div>
   </div>
@@ -867,142 +733,120 @@ exports[`EuiInlineEditForm Edit Mode renders 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <div
-    class="euiForm"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
   >
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFormRow euiFormRow--fullWidth"
+        id="generated-id-row"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout__childrenWrapper"
             >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-describedby="inlineEdit_generated-id"
-                  aria-label="Edit inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
+              <input
+                aria-describedby="inlineEdit_generated-id"
+                aria-label="Edit inline"
+                class="euiFieldText euiFieldText--fullWidth"
+                data-test-subj="euiInlineEditModeInput"
+                id="generated-id"
+                type="text"
+                value="Hello World!"
+              />
             </div>
           </div>
         </div>
-        <span
-          hidden=""
-          id="inlineEdit_generated-id"
-        >
-          Press Enter to save your edited text. Press Escape to cancel your edit.
-        </span>
       </div>
+      <span
+        hidden=""
+        id="inlineEdit_generated-id"
+      >
+        Press Enter to save your edited text. Press Escape to cancel your edit.
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Save edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+          data-test-subj="euiInlineEditModeSaveButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="check"
+          />
+        </button>
       </div>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        aria-busy="false"
+        data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
+          class="emotion-euiScreenReaderOnly"
         >
           <div
-            class="euiFormRow__fieldWrapper"
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
           >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
+            Loaded 
           </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
         </div>
+        <button
+          aria-label="Cancel edit"
+          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+          data-test-subj="euiInlineEditModeCancelButton"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
       </div>
     </div>
   </div>
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 7ac900295c6..c6e0c8662db 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -21,7 +21,6 @@ import {
   EuiFormRow,
   EuiFormRowProps,
   EuiFieldText,
-  EuiForm,
   EuiFieldTextProps,
 } from '../form';
 import { euiFormVariables } from '../form/form.styles';
@@ -178,98 +177,94 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   };
 
   const editModeForm = (
-    <EuiForm fullWidth>
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem>
-          <EuiFormRow
+    <EuiFlexGroup gutterSize="s">
+      <EuiFlexItem>
+        <EuiFormRow
+          fullWidth
+          isInvalid={isInvalid}
+          error={isInvalid && editModeProps?.formRowProps?.error}
+          {...editModeProps?.formRowProps}
+        >
+          <EuiFieldText
+            fullWidth
+            id={inlineEditInputId}
+            value={editModeValue}
+            onChange={(e) => {
+              setEditModeValue(e.target.value);
+            }}
+            aria-label={inputAriaLabel}
+            autoFocus
+            compressed={sizes.compressed}
             isInvalid={isInvalid}
-            error={isInvalid && editModeProps?.formRowProps?.error}
-            {...editModeProps?.formRowProps}
-          >
-            <EuiFieldText
-              id={inlineEditInputId}
-              value={editModeValue}
-              onChange={(e) => {
-                setEditModeValue(e.target.value);
-              }}
-              aria-label={inputAriaLabel}
-              autoFocus
-              compressed={sizes.compressed}
-              isInvalid={isInvalid}
-              isLoading={isLoading}
-              data-test-subj="euiInlineEditModeInput"
-              {...editModeProps?.inputProps}
-              aria-describedby={classNames(
-                editModeDescribedById,
-                editModeProps?.inputProps?.['aria-describedby']
-              )}
-              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
-                editModeInputOnKeyDown(e);
-                editModeProps?.inputProps?.onKeyDown?.(e);
-              }}
-            />
-          </EuiFormRow>
-          <span id={editModeDescribedById} hidden>
-            <EuiI18n
-              token="euiInlineEditForm.inputKeyboardInstructions"
-              default="Press Enter to save your edited text. Press Escape to cancel your edit."
-            />
-          </span>
-        </EuiFlexItem>
+            isLoading={isLoading}
+            data-test-subj="euiInlineEditModeInput"
+            {...editModeProps?.inputProps}
+            aria-describedby={classNames(
+              editModeDescribedById,
+              editModeProps?.inputProps?.['aria-describedby']
+            )}
+            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+              editModeInputOnKeyDown(e);
+              editModeProps?.inputProps?.onKeyDown?.(e);
+            }}
+          />
+        </EuiFormRow>
+        <span id={editModeDescribedById} hidden>
+          <EuiI18n
+            token="euiInlineEditForm.inputKeyboardInstructions"
+            default="Press Enter to save your edited text. Press Escape to cancel your edit."
+          />
+        </span>
+      </EuiFlexItem>
 
-        <EuiFlexItem grow={false} className={classes}>
-          <EuiFormRow>
-            <EuiSkeletonRectangle
-              isLoading={isLoading}
-              height={loadingSkeletonSize}
-              width={loadingSkeletonSize}
-              borderRadius="m"
-            >
-              <EuiButtonIcon
-                iconType="check"
-                aria-label={defaultSaveButtonAriaLabel}
-                color="success"
-                display="base"
-                size={sizes.buttonSize}
-                iconSize={sizes.iconSize}
-                data-test-subj="euiInlineEditModeSaveButton"
-                {...editModeProps?.saveButtonProps}
-                onClick={(e: MouseEvent<HTMLButtonElement>) => {
-                  saveInlineEditValue();
-                  editModeProps?.saveButtonProps?.onClick?.(e);
-                }}
-              />
-            </EuiSkeletonRectangle>
-          </EuiFormRow>
-        </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSkeletonRectangle
+          isLoading={isLoading}
+          height={loadingSkeletonSize}
+          width={loadingSkeletonSize}
+          borderRadius="m"
+        >
+          <EuiButtonIcon
+            iconType="check"
+            aria-label={defaultSaveButtonAriaLabel}
+            color="success"
+            display="base"
+            size={sizes.buttonSize}
+            iconSize={sizes.iconSize}
+            data-test-subj="euiInlineEditModeSaveButton"
+            {...editModeProps?.saveButtonProps}
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              saveInlineEditValue();
+              editModeProps?.saveButtonProps?.onClick?.(e);
+            }}
+          />
+        </EuiSkeletonRectangle>
+      </EuiFlexItem>
 
-        <EuiFlexItem grow={false}>
-          <EuiFormRow>
-            <EuiSkeletonRectangle
-              isLoading={isLoading}
-              height={loadingSkeletonSize}
-              width={loadingSkeletonSize}
-              borderRadius="m"
-            >
-              <EuiButtonIcon
-                iconType="cross"
-                aria-label={defaultCancelButtonAriaLabel}
-                color="danger"
-                display="base"
-                size={sizes.buttonSize}
-                iconSize={sizes.iconSize}
-                data-test-subj="euiInlineEditModeCancelButton"
-                {...editModeProps?.cancelButtonProps}
-                onClick={(e: MouseEvent<HTMLButtonElement>) => {
-                  cancelInlineEdit();
-                  editModeProps?.cancelButtonProps?.onClick?.(e);
-                }}
-              />
-            </EuiSkeletonRectangle>
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiForm>
+      <EuiFlexItem grow={false}>
+        <EuiSkeletonRectangle
+          isLoading={isLoading}
+          height={loadingSkeletonSize}
+          width={loadingSkeletonSize}
+          borderRadius="m"
+        >
+          <EuiButtonIcon
+            iconType="cross"
+            aria-label={defaultCancelButtonAriaLabel}
+            color="danger"
+            display="base"
+            size={sizes.buttonSize}
+            iconSize={sizes.iconSize}
+            data-test-subj="euiInlineEditModeCancelButton"
+            {...editModeProps?.cancelButtonProps}
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              cancelInlineEdit();
+              editModeProps?.cancelButtonProps?.onClick?.(e);
+            }}
+          />
+        </EuiSkeletonRectangle>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 
   const readModeElement = (

From d1b75f98f345af03389e787ff39368b89883517d Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 1 May 2023 16:34:17 -0700
Subject: [PATCH 2/7] Use `EuiSkeletonLoading` instead of 2
 `EuiSkeletonRectangle`s

- this prevents double loading screen reader announcements
---
 .../inline_edit_form.test.tsx.snap            | 489 +++++++-----------
 .../inline_edit/inline_edit_form.tsx          |  94 ++--
 2 files changed, 231 insertions(+), 352 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 c4aa7534b34..4c6b22332a4 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
@@ -67,59 +67,37 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.cancelButtonProps 1`] = `
             role="status"
           />
         </div>
-        <button
-          aria-label="Save edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-          data-test-subj="euiInlineEditModeSaveButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="check"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      class="euiFlexItem emotion-euiFlexItem-growZero"
-    >
-      <div
-        aria-busy="false"
-        data-test-subj="euiSkeletonLoadingAriaWrapper"
-      >
         <div
-          class="emotion-euiScreenReaderOnly"
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
+          <button
+            aria-label="Save edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            data-test-subj="euiInlineEditModeSaveButton"
+            type="button"
           >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="check"
+            />
+          </button>
+          <button
+            aria-label="Uh no. Do not save."
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-disabled"
+            data-test-subj="euiInlineEditModeCancelButton"
+            disabled=""
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+          </button>
         </div>
-        <button
-          aria-label="Uh no. Do not save."
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-disabled"
-          data-test-subj="euiInlineEditModeCancelButton"
-          disabled=""
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
       </div>
     </div>
   </div>
@@ -194,58 +172,36 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.formRowProps 1`] = `
             role="status"
           />
         </div>
-        <button
-          aria-label="Save edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-          data-test-subj="euiInlineEditModeSaveButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="check"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      class="euiFlexItem emotion-euiFlexItem-growZero"
-    >
-      <div
-        aria-busy="false"
-        data-test-subj="euiSkeletonLoadingAriaWrapper"
-      >
         <div
-          class="emotion-euiScreenReaderOnly"
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
+          <button
+            aria-label="Save edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            data-test-subj="euiInlineEditModeSaveButton"
+            type="button"
           >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="check"
+            />
+          </button>
+          <button
+            aria-label="Cancel edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            data-test-subj="euiInlineEditModeCancelButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+          </button>
         </div>
-        <button
-          aria-label="Cancel edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-          data-test-subj="euiInlineEditModeCancelButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
       </div>
     </div>
   </div>
@@ -325,58 +281,36 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.inputProps 1`] = `
             role="status"
           />
         </div>
-        <button
-          aria-label="Save edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-          data-test-subj="euiInlineEditModeSaveButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="check"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      class="euiFlexItem emotion-euiFlexItem-growZero"
-    >
-      <div
-        aria-busy="false"
-        data-test-subj="euiSkeletonLoadingAriaWrapper"
-      >
         <div
-          class="emotion-euiScreenReaderOnly"
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
+          <button
+            aria-label="Save edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            data-test-subj="euiInlineEditModeSaveButton"
+            type="button"
           >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="check"
+            />
+          </button>
+          <button
+            aria-label="Cancel edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            data-test-subj="euiInlineEditModeCancelButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+          </button>
         </div>
-        <button
-          aria-label="Cancel edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-          data-test-subj="euiInlineEditModeCancelButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
       </div>
     </div>
   </div>
@@ -450,58 +384,36 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.saveButtonProps 1`] = `
             role="status"
           />
         </div>
-        <button
-          aria-label="Yes! Let's save."
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-primary"
-          data-test-subj="euiInlineEditModeSaveButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="check"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      class="euiFlexItem emotion-euiFlexItem-growZero"
-    >
-      <div
-        aria-busy="false"
-        data-test-subj="euiSkeletonLoadingAriaWrapper"
-      >
         <div
-          class="emotion-euiScreenReaderOnly"
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
+          <button
+            aria-label="Yes! Let's save."
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-primary"
+            data-test-subj="euiInlineEditModeSaveButton"
+            type="button"
           >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="check"
+            />
+          </button>
+          <button
+            aria-label="Cancel edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            data-test-subj="euiInlineEditModeCancelButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+          </button>
         </div>
-        <button
-          aria-label="Cancel edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-          data-test-subj="euiInlineEditModeCancelButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
       </div>
     </div>
   </div>
@@ -584,58 +496,36 @@ exports[`EuiInlineEditForm Edit Mode isInvalid 1`] = `
             role="status"
           />
         </div>
-        <button
-          aria-label="Save edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-          data-test-subj="euiInlineEditModeSaveButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="check"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      class="euiFlexItem emotion-euiFlexItem-growZero"
-    >
-      <div
-        aria-busy="false"
-        data-test-subj="euiSkeletonLoadingAriaWrapper"
-      >
         <div
-          class="emotion-euiScreenReaderOnly"
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
+          <button
+            aria-label="Save edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            data-test-subj="euiInlineEditModeSaveButton"
+            type="button"
           >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="check"
+            />
+          </button>
+          <button
+            aria-label="Cancel edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            data-test-subj="euiInlineEditModeCancelButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+          </button>
         </div>
-        <button
-          aria-label="Cancel edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-          data-test-subj="euiInlineEditModeCancelButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
       </div>
     </div>
   </div>
@@ -703,25 +593,32 @@ exports[`EuiInlineEditForm Edit Mode isLoading 1`] = `
       >
         <div
           aria-label="Loading "
-          class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
-          role="progressbar"
-          style="inline-size: 40px; block-size: 40px;"
-        />
-      </div>
-    </div>
-    <div
-      class="euiFlexItem emotion-euiFlexItem-growZero"
-    >
-      <div
-        aria-busy="true"
-        data-test-subj="euiSkeletonLoadingAriaWrapper"
-      >
-        <div
-          aria-label="Loading "
-          class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
           role="progressbar"
-          style="inline-size: 40px; block-size: 40px;"
-        />
+        >
+          <div
+            aria-busy="true"
+            data-test-subj="euiSkeletonLoadingAriaWrapper"
+          >
+            <div
+              aria-label="Loading "
+              class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
+              role="progressbar"
+              style="inline-size: 40px; block-size: 40px;"
+            />
+          </div>
+          <div
+            aria-busy="true"
+            data-test-subj="euiSkeletonLoadingAriaWrapper"
+          >
+            <div
+              aria-label="Loading "
+              class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
+              role="progressbar"
+              style="inline-size: 40px; block-size: 40px;"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -795,58 +692,36 @@ exports[`EuiInlineEditForm Edit Mode renders 1`] = `
             role="status"
           />
         </div>
-        <button
-          aria-label="Save edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-          data-test-subj="euiInlineEditModeSaveButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="check"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      class="euiFlexItem emotion-euiFlexItem-growZero"
-    >
-      <div
-        aria-busy="false"
-        data-test-subj="euiSkeletonLoadingAriaWrapper"
-      >
         <div
-          class="emotion-euiScreenReaderOnly"
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
+          <button
+            aria-label="Save edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+            data-test-subj="euiInlineEditModeSaveButton"
+            type="button"
           >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="check"
+            />
+          </button>
+          <button
+            aria-label="Cancel edit"
+            class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+            data-test-subj="euiInlineEditModeCancelButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="cross"
+            />
+          </button>
         </div>
-        <button
-          aria-label="Cancel edit"
-          class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-          data-test-subj="euiInlineEditModeCancelButton"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
       </div>
     </div>
   </div>
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index c6e0c8662db..9f96a0c98f0 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -28,7 +28,7 @@ import { EuiButtonIcon, EuiButtonEmpty } from '../button';
 import { EuiButtonIconPropsForButton } from '../button/button_icon';
 import { EuiButtonEmptyPropsForButton } from '../button/button_empty/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { EuiSkeletonRectangle } from '../skeleton';
+import { EuiSkeletonLoading, EuiSkeletonRectangle } from '../skeleton';
 import { useEuiTheme, keys } from '../../services';
 import { EuiI18n, useEuiI18n } from '../i18n';
 import { useGeneratedHtmlId } from '../../services/accessibility';
@@ -218,51 +218,55 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <EuiSkeletonRectangle
+        <EuiSkeletonLoading
           isLoading={isLoading}
-          height={loadingSkeletonSize}
-          width={loadingSkeletonSize}
-          borderRadius="m"
-        >
-          <EuiButtonIcon
-            iconType="check"
-            aria-label={defaultSaveButtonAriaLabel}
-            color="success"
-            display="base"
-            size={sizes.buttonSize}
-            iconSize={sizes.iconSize}
-            data-test-subj="euiInlineEditModeSaveButton"
-            {...editModeProps?.saveButtonProps}
-            onClick={(e: MouseEvent<HTMLButtonElement>) => {
-              saveInlineEditValue();
-              editModeProps?.saveButtonProps?.onClick?.(e);
-            }}
-          />
-        </EuiSkeletonRectangle>
-      </EuiFlexItem>
-
-      <EuiFlexItem grow={false}>
-        <EuiSkeletonRectangle
-          isLoading={isLoading}
-          height={loadingSkeletonSize}
-          width={loadingSkeletonSize}
-          borderRadius="m"
-        >
-          <EuiButtonIcon
-            iconType="cross"
-            aria-label={defaultCancelButtonAriaLabel}
-            color="danger"
-            display="base"
-            size={sizes.buttonSize}
-            iconSize={sizes.iconSize}
-            data-test-subj="euiInlineEditModeCancelButton"
-            {...editModeProps?.cancelButtonProps}
-            onClick={(e: MouseEvent<HTMLButtonElement>) => {
-              cancelInlineEdit();
-              editModeProps?.cancelButtonProps?.onClick?.(e);
-            }}
-          />
-        </EuiSkeletonRectangle>
+          loadingContent={
+            <EuiFlexGroup gutterSize="s">
+              <EuiSkeletonRectangle
+                height={loadingSkeletonSize}
+                width={loadingSkeletonSize}
+                borderRadius="m"
+              />
+              <EuiSkeletonRectangle
+                height={loadingSkeletonSize}
+                width={loadingSkeletonSize}
+                borderRadius="m"
+              />
+            </EuiFlexGroup>
+          }
+          loadedContent={
+            <EuiFlexGroup gutterSize="s">
+              <EuiButtonIcon
+                iconType="check"
+                aria-label={defaultSaveButtonAriaLabel}
+                color="success"
+                display="base"
+                size={sizes.buttonSize}
+                iconSize={sizes.iconSize}
+                data-test-subj="euiInlineEditModeSaveButton"
+                {...editModeProps?.saveButtonProps}
+                onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                  saveInlineEditValue();
+                  editModeProps?.saveButtonProps?.onClick?.(e);
+                }}
+              />
+              <EuiButtonIcon
+                iconType="cross"
+                aria-label={defaultCancelButtonAriaLabel}
+                color="danger"
+                display="base"
+                size={sizes.buttonSize}
+                iconSize={sizes.iconSize}
+                data-test-subj="euiInlineEditModeCancelButton"
+                {...editModeProps?.cancelButtonProps}
+                onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                  cancelInlineEdit();
+                  editModeProps?.cancelButtonProps?.onClick?.(e);
+                }}
+              />
+            </EuiFlexGroup>
+          }
+        />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

From 76e04a49d4e416439bf37d2ff3839c7a484cb81c Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 1 May 2023 16:51:52 -0700
Subject: [PATCH 3/7] Update EuiInlineEdit to only announce when state flips to
 loading

- so that a "loaded" announcement doesn't occur whenever edit mode is opened, which doesn't make a whole lot of sense
---
 .../inline_edit_form.test.tsx.snap            | 119 +++---------------
 .../inline_edit/inline_edit_form.tsx          |   2 +
 2 files changed, 19 insertions(+), 102 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 4c6b22332a4..541ceaf239f 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
@@ -50,23 +50,6 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.cancelButtonProps 1`] = `
         aria-busy="false"
         data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
-        <div
-          class="emotion-euiScreenReaderOnly"
-        >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
-        </div>
         <div
           class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
@@ -155,23 +138,6 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.formRowProps 1`] = `
         aria-busy="false"
         data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
-        <div
-          class="emotion-euiScreenReaderOnly"
-        >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
-        </div>
         <div
           class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
@@ -264,23 +230,6 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.inputProps 1`] = `
         aria-busy="false"
         data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
-        <div
-          class="emotion-euiScreenReaderOnly"
-        >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
-        </div>
         <div
           class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
@@ -367,23 +316,6 @@ exports[`EuiInlineEditForm Edit Mode editModeProps.saveButtonProps 1`] = `
         aria-busy="false"
         data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
-        <div
-          class="emotion-euiScreenReaderOnly"
-        >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
-        </div>
         <div
           class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
@@ -479,23 +411,6 @@ exports[`EuiInlineEditForm Edit Mode isInvalid 1`] = `
         aria-busy="false"
         data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
-        <div
-          class="emotion-euiScreenReaderOnly"
-        >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
-        </div>
         <div
           class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
@@ -591,6 +506,23 @@ exports[`EuiInlineEditForm Edit Mode isLoading 1`] = `
         aria-busy="true"
         data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
+        <div
+          class="emotion-euiScreenReaderOnly"
+        >
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            role="status"
+          >
+            Loading 
+          </div>
+          <div
+            aria-atomic="true"
+            aria-hidden="true"
+            aria-live="off"
+            role="status"
+          />
+        </div>
         <div
           aria-label="Loading "
           class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
@@ -675,23 +607,6 @@ exports[`EuiInlineEditForm Edit Mode renders 1`] = `
         aria-busy="false"
         data-test-subj="euiSkeletonLoadingAriaWrapper"
       >
-        <div
-          class="emotion-euiScreenReaderOnly"
-        >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          >
-            Loaded 
-          </div>
-          <div
-            aria-atomic="true"
-            aria-hidden="true"
-            aria-live="off"
-            role="status"
-          />
-        </div>
         <div
           class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
         >
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 9f96a0c98f0..7db83b6832e 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -220,6 +220,8 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
       <EuiFlexItem grow={false}>
         <EuiSkeletonLoading
           isLoading={isLoading}
+          announceLoadingStatus={true}
+          announceLoadedStatus={false}
           loadingContent={
             <EuiFlexGroup gutterSize="s">
               <EuiSkeletonRectangle

From ac19b54e97354398ccbcc849e6cad54ea9f6c54d Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 1 May 2023 17:15:11 -0700
Subject: [PATCH 4/7] Improve SR UX of read mode

- add an `aria-describedby` that explains to screen reader users what happens when the read mode button is clicked, since the text itself is not indicative

+ cleanup: remove unused input ID
---
 .../inline_edit_form.test.tsx.snap            | 21 ++++++++
 .../inline_edit_text.test.tsx.snap            | 28 +++++++++++
 .../inline_edit_title.test.tsx.snap           | 49 ++++++++++++++++++
 .../inline_edit/inline_edit_form.tsx          | 50 +++++++++++--------
 4 files changed, 128 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 541ceaf239f..44d0882bc92 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
@@ -648,6 +648,7 @@ exports[`EuiInlineEditForm Read Mode readModeProps 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-9t7nyf-empty-primary"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -667,6 +668,12 @@ exports[`EuiInlineEditForm Read Mode readModeProps 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -675,6 +682,7 @@ exports[`EuiInlineEditForm Read Mode renders 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -694,6 +702,12 @@ exports[`EuiInlineEditForm Read Mode renders 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -702,6 +716,7 @@ exports[`EuiInlineEditForm Read Mode sizes 1`] = `
   class="euiInlineEdit testClass1 testClass2"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -721,5 +736,11 @@ exports[`EuiInlineEditForm Read Mode sizes 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button 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 42d20b7f64e..c84ffa0c68a 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
@@ -5,6 +5,7 @@ exports[`EuiInlineEditText renders 1`] = `
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -28,6 +29,12 @@ exports[`EuiInlineEditText renders 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -36,6 +43,7 @@ exports[`EuiInlineEditText text sizes renders m 1`] = `
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -59,6 +67,12 @@ exports[`EuiInlineEditText text sizes renders m 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -67,6 +81,7 @@ exports[`EuiInlineEditText text sizes renders s 1`] = `
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-s-s"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -90,6 +105,12 @@ exports[`EuiInlineEditText text sizes renders s 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -98,6 +119,7 @@ exports[`EuiInlineEditText text sizes renders xs 1`] = `
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-xs-xs"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -121,5 +143,11 @@ exports[`EuiInlineEditText text sizes renders xs 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button 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 19a670a600d..58527fff8f8 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
@@ -5,6 +5,7 @@ exports[`EuiInlineEditTitle renders 1`] = `
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -28,6 +29,12 @@ exports[`EuiInlineEditTitle renders 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -36,6 +43,7 @@ exports[`EuiInlineEditTitle title sizes renders size l 1`] = `
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-l-l"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -59,6 +67,12 @@ exports[`EuiInlineEditTitle title sizes renders size l 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -67,6 +81,7 @@ exports[`EuiInlineEditTitle title sizes renders size m 1`] = `
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -90,6 +105,12 @@ exports[`EuiInlineEditTitle title sizes renders size m 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -98,6 +119,7 @@ exports[`EuiInlineEditTitle title sizes renders size s 1`] = `
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-s-s"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -121,6 +143,12 @@ exports[`EuiInlineEditTitle title sizes renders size s 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -129,6 +157,7 @@ exports[`EuiInlineEditTitle title sizes renders size xs 1`] = `
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xs-xs"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -152,6 +181,12 @@ exports[`EuiInlineEditTitle title sizes renders size xs 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -160,6 +195,7 @@ exports[`EuiInlineEditTitle title sizes renders size xxs 1`] = `
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxs-xxs"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -183,6 +219,12 @@ exports[`EuiInlineEditTitle title sizes renders size xxs 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
 </div>
 `;
 
@@ -191,6 +233,7 @@ exports[`EuiInlineEditTitle title sizes renders size xxxs 1`] = `
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxxs-xxxs"
 >
   <button
+    aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
@@ -214,5 +257,11 @@ exports[`EuiInlineEditTitle title sizes renders size xxxs 1`] = `
       </span>
     </span>
   </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button 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 7db83b6832e..4c32881e5c4 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -139,11 +139,10 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
     'Cancel edit'
   );
 
+  const readModeDescribedById = useGeneratedHtmlId({ prefix: 'inlineEdit' });
   const editModeDescribedById = useGeneratedHtmlId({ prefix: 'inlineEdit' });
 
   const [isEditing, setIsEditing] = useState(false || startWithEditOpen);
-  const inlineEditInputId = useGeneratedHtmlId({ prefix: '__inlineEditInput' });
-
   const [editModeValue, setEditModeValue] = useState(defaultValue);
   const [readModeValue, setReadModeValue] = useState(defaultValue);
 
@@ -187,7 +186,6 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
         >
           <EuiFieldText
             fullWidth
-            id={inlineEditInputId}
             value={editModeValue}
             onChange={(e) => {
               setEditModeValue(e.target.value);
@@ -274,23 +272,35 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   );
 
   const readModeElement = (
-    <EuiButtonEmpty
-      color="text"
-      iconType="pencil"
-      iconSide="right"
-      autoFocus
-      flush="both"
-      iconSize={sizes.iconSize}
-      size={sizes.buttonSize}
-      data-test-subj="euiInlineReadModeButton"
-      {...readModeProps}
-      onClick={(e) => {
-        setIsEditing(true);
-        readModeProps?.onClick?.(e);
-      }}
-    >
-      {children(readModeValue)}
-    </EuiButtonEmpty>
+    <>
+      <EuiButtonEmpty
+        color="text"
+        iconType="pencil"
+        iconSide="right"
+        autoFocus
+        flush="both"
+        iconSize={sizes.iconSize}
+        size={sizes.buttonSize}
+        data-test-subj="euiInlineReadModeButton"
+        {...readModeProps}
+        aria-describedby={classNames(
+          readModeDescribedById,
+          readModeProps?.['aria-describedby']
+        )}
+        onClick={(e) => {
+          setIsEditing(true);
+          readModeProps?.onClick?.(e);
+        }}
+      >
+        {children(readModeValue)}
+      </EuiButtonEmpty>
+      <span id={readModeDescribedById} hidden>
+        <EuiI18n
+          token="euiInlineEditForm.toggleEditModeDescription"
+          default="Click this button to edit this text inline."
+        />
+      </span>
+    </>
   );
 
   return (

From a5001a7a371a67591fb0cb975c47140ddf1004ca Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 1 May 2023 17:20:18 -0700
Subject: [PATCH 5/7] Fix `editModeProps.inputProps.onChange`
 overriding/breaking behavior

---
 .../inline_edit/inline_edit_form.test.tsx         | 14 ++++++++++++--
 src/components/inline_edit/inline_edit_form.tsx   | 15 ++++++++-------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
index 98a46cb935a..cd990756c60 100644
--- a/src/components/inline_edit/inline_edit_form.test.tsx
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -76,6 +76,8 @@ describe('EuiInlineEditForm', () => {
     });
 
     test('editModeProps.inputProps', () => {
+      const onChange = jest.fn();
+
       const { container, getByTestSubject } = render(
         <EuiInlineEditForm
           {...commonInlineEditFormProps}
@@ -84,13 +86,21 @@ describe('EuiInlineEditForm', () => {
             inputProps: {
               prepend: 'Prepend Example',
               'data-test-subj': 'customInput',
+              onChange,
             },
           }}
         />
       );
-
       expect(container.firstChild).toMatchSnapshot();
-      expect(getByTestSubject('customInput')).toBeTruthy();
+
+      const mockChangeEvent = { target: { value: 'changed' } };
+      fireEvent.change(getByTestSubject('customInput'), mockChangeEvent);
+      expect(onChange).toHaveBeenCalled();
+
+      // Consumer `onChange` callbacks should not override EUI's
+      expect(
+        (getByTestSubject('customInput') as HTMLInputElement).value
+      ).toEqual('changed');
     });
 
     test('editModeProps.formRowProps', () => {
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 4c32881e5c4..5bbab3758c7 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -187,9 +187,6 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
           <EuiFieldText
             fullWidth
             value={editModeValue}
-            onChange={(e) => {
-              setEditModeValue(e.target.value);
-            }}
             aria-label={inputAriaLabel}
             autoFocus
             compressed={sizes.compressed}
@@ -197,14 +194,18 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
             isLoading={isLoading}
             data-test-subj="euiInlineEditModeInput"
             {...editModeProps?.inputProps}
+            onChange={(e) => {
+              setEditModeValue(e.target.value);
+              editModeProps?.inputProps?.onChange?.(e);
+            }}
+            onKeyDown={(e) => {
+              editModeInputOnKeyDown(e);
+              editModeProps?.inputProps?.onKeyDown?.(e);
+            }}
             aria-describedby={classNames(
               editModeDescribedById,
               editModeProps?.inputProps?.['aria-describedby']
             )}
-            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
-              editModeInputOnKeyDown(e);
-              editModeProps?.inputProps?.onKeyDown?.(e);
-            }}
           />
         </EuiFormRow>
         <span id={editModeDescribedById} hidden>

From a236a56177674bbffdcf44678987bb8ff9f59d1f Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 2 May 2023 15:35:48 -0700
Subject: [PATCH 6/7] Remove `autoFocus` in favor of imperative `.focus()`
 calls on click

- rAF is needed to wait a tick after state has changed and DOM node is available

+ write tests (with waitFor) asserting that focus state works as expected (mocking rAF primarily for test/function coverage)
---
 .../inline_edit/inline_edit_form.test.tsx     | 40 ++++++++++++++++---
 .../inline_edit/inline_edit_form.tsx          | 30 +++++++++++---
 2 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
index cd990756c60..1bbffb738b0 100644
--- a/src/components/inline_edit/inline_edit_form.test.tsx
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -191,9 +191,16 @@ describe('EuiInlineEditForm', () => {
   });
 
   describe('Toggling between readMode and editMode', () => {
+    jest
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((cb: Function) => cb());
+
     const onClick = jest.fn();
     const onSave = jest.fn();
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+      onClick.mockReset();
+      onSave.mockReset();
+    });
 
     it('toggles to editMode when the readModeButton is clicked', () => {
       const { getByTestSubject, queryByTestSubject } = render(
@@ -204,8 +211,13 @@ describe('EuiInlineEditForm', () => {
       );
 
       fireEvent.click(getByTestSubject('euiInlineReadModeButton'));
-      expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
+
       expect(queryByTestSubject('euiInlineReadModeButton')).toBeFalsy();
+      waitFor(() => {
+        expect(document.activeElement).toEqual(
+          getByTestSubject('euiInlineEditModeInput')
+        );
+      });
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
@@ -227,7 +239,11 @@ describe('EuiInlineEditForm', () => {
       ).toEqual('New message!');
       fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
 
-      expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+      waitFor(() => {
+        expect(document.activeElement).toEqual(
+          getByTestSubject('euiInlineReadModeButton')
+        );
+      });
       expect(getByText('New message!')).toBeTruthy();
       expect(onSave).toHaveBeenCalledWith('New message!');
       expect(onClick).toHaveBeenCalledTimes(1);
@@ -251,7 +267,11 @@ describe('EuiInlineEditForm', () => {
       ).toEqual('New message!');
       fireEvent.click(getByTestSubject('euiInlineEditModeCancelButton'));
 
-      expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+      waitFor(() => {
+        expect(document.activeElement).toEqual(
+          getByTestSubject('euiInlineReadModeButton')
+        );
+      });
       expect(getByText('Hello World!')).toBeTruthy();
       expect(onSave).not.toHaveBeenCalled();
       expect(onClick).toHaveBeenCalledTimes(1);
@@ -360,7 +380,11 @@ describe('EuiInlineEditForm', () => {
           key: 'Enter',
         });
 
-        expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+        waitFor(() => {
+          expect(document.activeElement).toEqual(
+            getByTestSubject('euiInlineReadModeButton')
+          );
+        });
         expect(getByText('New message!')).toBeTruthy();
       });
 
@@ -379,7 +403,11 @@ describe('EuiInlineEditForm', () => {
           key: 'Escape',
         });
 
-        expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+        waitFor(() => {
+          expect(document.activeElement).toEqual(
+            getByTestSubject('euiInlineReadModeButton')
+          );
+        });
         expect(getByText('Hello World!')).toBeTruthy();
       });
 
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 5bbab3758c7..c498e0b4891 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -10,6 +10,7 @@ import React, {
   ReactNode,
   FunctionComponent,
   useState,
+  useRef,
   HTMLAttributes,
   MouseEvent,
   KeyboardEvent,
@@ -29,7 +30,7 @@ import { EuiButtonIconPropsForButton } from '../button/button_icon';
 import { EuiButtonEmptyPropsForButton } from '../button/button_empty/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSkeletonLoading, EuiSkeletonRectangle } from '../skeleton';
-import { useEuiTheme, keys } from '../../services';
+import { useEuiTheme, useCombinedRefs, keys } from '../../services';
 import { EuiI18n, useEuiI18n } from '../i18n';
 import { useGeneratedHtmlId } from '../../services/accessibility';
 
@@ -142,13 +143,31 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   const readModeDescribedById = useGeneratedHtmlId({ prefix: 'inlineEdit' });
   const editModeDescribedById = useGeneratedHtmlId({ prefix: 'inlineEdit' });
 
+  const readModeFocusRef = useRef<HTMLButtonElement | null>(null);
+  const editModeFocusRef = useRef<HTMLInputElement | null>(null);
+  const setReadModeRefs = useCombinedRefs([
+    readModeFocusRef,
+    readModeProps?.buttonRef,
+  ]);
+  const setEditModeRefs = useCombinedRefs([
+    editModeFocusRef,
+    editModeProps?.inputProps?.inputRef,
+  ]);
+
   const [isEditing, setIsEditing] = useState(false || startWithEditOpen);
   const [editModeValue, setEditModeValue] = useState(defaultValue);
   const [readModeValue, setReadModeValue] = useState(defaultValue);
 
+  const toggleEditMode = () => {
+    setIsEditing(true);
+    // Waits a tick for state to settle and the focus target to render
+    requestAnimationFrame(() => editModeFocusRef.current?.focus());
+  };
+
   const cancelInlineEdit = () => {
     setEditModeValue(readModeValue);
     setIsEditing(false);
+    requestAnimationFrame(() => readModeFocusRef.current?.focus());
   };
 
   const saveInlineEditValue = async () => {
@@ -162,6 +181,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
 
     setReadModeValue(editModeValue);
     setIsEditing(false);
+    requestAnimationFrame(() => readModeFocusRef.current?.focus());
   };
 
   const editModeInputOnKeyDown = (event: KeyboardEvent<HTMLElement>) => {
@@ -188,12 +208,12 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
             fullWidth
             value={editModeValue}
             aria-label={inputAriaLabel}
-            autoFocus
             compressed={sizes.compressed}
             isInvalid={isInvalid}
             isLoading={isLoading}
             data-test-subj="euiInlineEditModeInput"
             {...editModeProps?.inputProps}
+            inputRef={setEditModeRefs}
             onChange={(e) => {
               setEditModeValue(e.target.value);
               editModeProps?.inputProps?.onChange?.(e);
@@ -278,18 +298,18 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
         color="text"
         iconType="pencil"
         iconSide="right"
-        autoFocus
         flush="both"
         iconSize={sizes.iconSize}
         size={sizes.buttonSize}
         data-test-subj="euiInlineReadModeButton"
         {...readModeProps}
+        buttonRef={setReadModeRefs}
         aria-describedby={classNames(
           readModeDescribedById,
           readModeProps?.['aria-describedby']
         )}
-        onClick={(e) => {
-          setIsEditing(true);
+        onClick={(e: MouseEvent<HTMLButtonElement>) => {
+          toggleEditMode();
           readModeProps?.onClick?.(e);
         }}
       >

From 32166cb48d5c6a1d96e2ee11a1c4914584f72286 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 3 May 2023 11:53:52 -0700
Subject: [PATCH 7/7] [PR feedback] `toggle`->`activate`

---
 src/components/inline_edit/inline_edit_form.test.tsx | 2 +-
 src/components/inline_edit/inline_edit_form.tsx      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
index 1bbffb738b0..49c9e7de684 100644
--- a/src/components/inline_edit/inline_edit_form.test.tsx
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -202,7 +202,7 @@ describe('EuiInlineEditForm', () => {
       onSave.mockReset();
     });
 
-    it('toggles to editMode when the readModeButton is clicked', () => {
+    it('activates editMode when the readModeButton is clicked', () => {
       const { getByTestSubject, queryByTestSubject } = render(
         <EuiInlineEditForm
           {...commonInlineEditFormProps}
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index c498e0b4891..eb655660b9d 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -158,7 +158,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   const [editModeValue, setEditModeValue] = useState(defaultValue);
   const [readModeValue, setReadModeValue] = useState(defaultValue);
 
-  const toggleEditMode = () => {
+  const activateEditMode = () => {
     setIsEditing(true);
     // Waits a tick for state to settle and the focus target to render
     requestAnimationFrame(() => editModeFocusRef.current?.focus());
@@ -309,7 +309,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
           readModeProps?.['aria-describedby']
         )}
         onClick={(e: MouseEvent<HTMLButtonElement>) => {
-          toggleEditMode();
+          activateEditMode();
           readModeProps?.onClick?.(e);
         }}
       >
@@ -317,7 +317,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
       </EuiButtonEmpty>
       <span id={readModeDescribedById} hidden>
         <EuiI18n
-          token="euiInlineEditForm.toggleEditModeDescription"
+          token="euiInlineEditForm.activateEditModeDescription"
           default="Click this button to edit this text inline."
         />
       </span>