Fix VO announcing EuiInlineEditText as clickable in read only mode

cee-chen · May 23, 2023 · 0f483bd · 0f483bd
1 parent bd4118c
commit 0f483bd
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
@@ -332,10 +332,15 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
           readModeDescribedById,
           readModeProps?.['aria-describedby']
         )}
-        onClick={(e: MouseEvent<HTMLButtonElement>) => {
-          activateEditMode();
-          readModeProps?.onClick?.(e);
-        }}
+        onClick={
+          // `undefined` prevents screen readers from announcing "clickable" when the button is readonly
+          !isReadOnly
+            ? (e: MouseEvent<HTMLButtonElement>) => {
+                activateEditMode();
+                readModeProps?.onClick?.(e);
+              }
+            : undefined
+        }
       >
         {children(readModeValue)}
       </EuiButtonEmpty>