Support for adding ARIA labels to TextEditor without displaying visible labels.

[siddhant-sage24]

Description

As a developer using Carbon, I want the TextEditor component to support ARIA labels (such as aria-label) without rendering a visible label, so that the component remains accessible while maintaining a clean UI design.

Suggested solution

Add support for an aria-label or similar prop in the TextEditor component, which can be used to provide descriptive labels for screen readers without rendering visible labels.

Demo URL

No response

Alternatives

No response

Additional context

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[tomdavies73]

@siddhant-sage24 currently the label on TextEditor is required, in order for us to provide an aria solution to provide proper labelling, we'd first have to make the visual label optional. Which is currently not supported in Carbon or the Design System.

@ljemmo @harpalsingh is this something we'd like to support? From a technical standpoint it wouldn't be too difficult, however it may not be viable as we'd still be losing a visual label here, affecting users not using a screen reader.

[ljemmo]

@tomdavies73 is this for on WYSIWIG editor elements such as bold, italics etc? If so, i would definitely recommend the ability to make the labels optional and adding aria support. Looking at the vast marjority of editors, most are icon only due to the large amount of buttons needed.

[siddhant-sage24]

This issue is for RichText Field that uses the TextEditor component by our Sage Carbon library.
Axe DevTools flagged the TextEditor component with the accessibility issue: "The TextEditor component does not provide an accessible name via aria-label, aria-labelledby, or a title attribute. This makes it inaccessible to screen readers."
I've attached a screenshot of the Create Message page to provide more context. Please let me know if further details are needed.

Image has been removed, but has been saved for future reference

[tomdavies73]

@siddhant-sage24 that axe issue is because no label is being provided. In the meantime, I would suggest using the components interface as intended, and provide all props which are marked as required.

Without passing a label, the component will not be accessible. As stated earlier, a visible label is still required on the component and in the Design System, I'd recommend using one for the meantime to avoid this axe issue.

[nicktitchmarsh]

FE-7021

[nicktitchmarsh]

@siddhant-sage24 , we have reviewed this and think that adding inline label support would solve the issue as you wouldn't then need to use a workaround. Let us know if this isn't suitable

[siddhant-sage24]

@nicktitchmarsh I attempted to address the issue by adding the required props. However, the problem seems to stem from the Carbon component not supporting aria-label natively. Even with inline label support, the Axe failure still occurs because Axe specifically checks for aria-label. Adding inline label support does not resolve the issue.