[EuiMarkdownEditor][A11y] Fix invalid nested interactive elements (elastic#9625)

Author: mgadewoll

packages/eui/changelogs/upcoming/9625.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Fixed invalid nested interactive elements in `EuiMarkdownEditor` by removing `role` from the drop zone wrapper.

packages/eui/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap

@@ -210,7 +210,6 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
   >
     <div
       class="euiMarkdownEditorDropZone emotion-euiMarkdownEditorDropZone"
-      role="button"
     >
       <textarea
         aria-label="aria-label"
@@ -468,7 +467,6 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
   >
     <div
       class="euiMarkdownEditorDropZone emotion-euiMarkdownEditorDropZone"
-      role="button"
     >
       <textarea
         aria-label="aria-label"
@@ -725,7 +723,6 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
   >
     <div
       class="euiMarkdownEditorDropZone emotion-euiMarkdownEditorDropZone"
-      role="button"
     >
       <textarea
         aria-label="aria-label"
@@ -982,7 +979,6 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
   >
     <div
       class="euiMarkdownEditorDropZone emotion-euiMarkdownEditorDropZone"
-      role="button"
     >
       <textarea
         aria-label="aria-label"
@@ -1239,7 +1235,6 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
   >
     <div
       class="euiMarkdownEditorDropZone emotion-euiMarkdownEditorDropZone"
-      role="button"
     >
       <textarea
         aria-label="aria-label"

packages/eui/src/components/markdown_editor/markdown_editor.stories.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
@@ -89,3 +89,58 @@ export const CustomToolbarContent: Story = {
     },
   },
 };
+
+export const DropZone: Story = {
+  parameters: {
+    controls: { include: ['dropHandlers', 'value'] },
+    loki: {
+      // functional test story only
+      skip: true,
+    },
+  },
+  args: {
+    value: initialContent,
+    dropHandlers: [
+      {
+        supportedFiles: ['image/png', 'image/jpeg'],
+        accepts: (type: string) => type.startsWith('image/'),
+        getFormattingForItem: (file: File) =>
+          new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () =>
+              resolve({
+                text: `![${file.name}](${reader.result})`,
+                config: { block: true },
+              });
+            reader.readAsDataURL(file);
+          }),
+      },
+    ],
+  },
+  render: (args: EuiMarkdownEditorProps) => (
+    <StatefulMarkdownEditor {...args} />
+  ),
+};
+
+const StatefulMarkdownEditor = ({
+  value: _value,
+  onChange,
+  ...rest
+}: EuiMarkdownEditorProps) => {
+  const [value, setValue] = useState(_value);
+
+  useEffect(() => {
+    setValue(_value);
+  }, [_value]);
+
+  return (
+    <EuiMarkdownEditor
+      {...rest}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        onChange?.(v);
+      }}
+    />
+  );
+};

packages/eui/src/components/markdown_editor/markdown_editor.test.tsx

@@ -121,6 +121,34 @@ describe('EuiMarkdownEditor', () => {
         expect(container.firstChild).toMatchSnapshot();
       });
     });
+
+    describe('dropHandlers', () => {
+      // A11y: ensure interactive elements aren't nested
+      it('does not have role="button" when dropHandlers are provided', () => {
+        const { container } = render(
+          <EuiMarkdownEditor
+            editorId="editorId"
+            value=""
+            onChange={() => null}
+            dropHandlers={[
+              {
+                supportedFiles: ['image/png'],
+                accepts: (type: string) => type === 'image/png',
+                getFormattingForItem: (file: File) =>
+                  Promise.resolve({
+                    text: `![${file.name}]()`,
+                    config: { block: true },
+                  }),
+              },
+            ]}
+            {...requiredProps}
+          />
+        );
+
+        const dropZone = container.querySelector('.euiMarkdownEditorDropZone');
+        expect(dropZone).not.toHaveAttribute('role', 'button');
+      });
+    });
   });
 
   test('is preview rendered', () => {

packages/eui/src/components/markdown_editor/markdown_editor_drop_zone.tsx

@@ -214,7 +214,11 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<
   });
 
   const rootProps = { ...getRootProps() };
-  if (readOnly) rootProps.role = undefined; // Unset the default `role="button"` attribute which sets a misleading pointer icon
+  /* Unset the default `role="button"` attribute to prevent invalid nested interactive elements.
+  The dropzone has `noClick=true` and `noKeyboard=true` set via `useDropzone`.
+  Keyboard drop interactions expect the drop zone element to have `role="button` but we're supporting
+  adding files via a standalone footer button instead." */
+  rootProps.role = undefined;
 
   return (
     <div {...rootProps} css={cssStyles} className={classes}>