Fix VO announcing EuiInlineEditText as clickable in read only mode

cee-chen · cee-chen · commit 0f483bd24dc6 · 2023-05-23T14:46:27.000-07:00
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>
