Accessibility improvement for <textarea> form control element

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.

@scniro

@scniro any updates on this bug?

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

@alestrunda

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) => {}}
/>

@jinhua-ibm

@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.

Navigation Menu

Repository navigation

Accessibility improvement for <textarea> form control element #304

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Accessibility improvement for <textarea> form control element #304

Description

Activity

sara-akhtar commented on Apr 11, 2023

alestrunda commented on Jan 24, 2024

jinhua-ibm commented on Apr 17, 2025

alestrunda commented on Apr 18, 2025

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions