The <MDEditor /> component is creating accessibility issues in my project

[matthewpagacik12]

When using the <MDEditor /> component in my project, it is creating accessibility issues for on the <textarea /> and <input /> elements. (See image)

Here is the extension I am using to check for accessibility issues

[janvorwerk]

@matthewpagacik12 have you tried something like:

      <MDEditor
        ...
        components={{
          textarea(props) {
            return <textarea name="description" aria-label={"Description"} {...(props as TextareaHTMLAttributes<HTMLTextAreaElement>)} />;
          },
        }}

-- EDIT: while this fixes the a11y issue, this causes a number of regressions in the behavior of the editor… We probably need all the features in Textarea.tsx

[mendahu]

Ran into this issue today as well. The "id" that is passed into MDEditor is put on a parent <div> instead of the <textarea>.

It should be noted that the textareaProps prop exists on MDEditor which lets you set these values, but this breaks with things like Ant's Form elements, which automatically pass in form attributes to their children.