Accessibility improvement for <textarea> form control element

[sara-akhtar]

There's an issue that's impacting multiple components in our application. The <textarea> element has no associated label which doesn't allow the browser to announce the control to a user that may need it.

Recommendations on fixes:

• If the control is a labelable element, add a for attribute to a visible label with the id of this control (e.g. );
• Or, if the control is a labelable element, put the control inside a visible element;
• Or, add an aria-labelledby attribute to the control. It must point to visible text on the page that is meaningful as a label;
• Or, if the design cannot have a visible label, provide a label using the aria-label attribute (e.g. aria-label="Activities");
• Or, if the design cannot have a visible label, use the title attribute to provide a label.

[sara-akhtar]

@scniro any updates on this bug?

[alestrunda]

By default, there is no label, but you can set it in the options as screenReaderLabel - will set it as aria-label.

[jinhua-ibm]

Hey @alestrunda:

Following up with your comment, and don't think aria-label is shown in <textarea>, can I have further instructions if possible?

https://stackblitz.com/edit/react-mkuohsnx?file=index.js

<CodeMirror
  value="<h1>I ♥ react-codemirror2</h1>"
  options={{
    mode: 'xml',
    screenReaderLabel: 'jinhua',
    lineNumbers: true,
  }}
  onChange={(editor, data, value) => {}}
/>

[alestrunda]

@jinhua-ibm in that example you're using an old version of the lib - from package.json "react-codemirror2": "^6.0.0". I was using 7.3.0 and it was working fine there. I'm not sure about other versions.