Accessibility Issue observed - Functions>Form control element <textarea> has no associated label

[deepakb2410]

Problem

Functions>Form control element has no associated label, During the execution of AVT test, we observed the AVT issue on textarea that has not associated label

Sample code to reproduce your issue

<AceEditor className={getClass('ace', ['editor'])} editorProps={EditorProps} mode={mode} name={${mode}-editor} onChange={value => this.onCodeChange(value)} setOptions={EditorOptions} theme={EditorTheme.CHROME} value={content} />

References

Adding screen shot

Progress on: # "react-ace": "^6.3.2"

[Shane79717]

This issue also still persists when checking the accessibility through Axe. Is there a resolution to this problem or a workaround?

[wlinacdl]

Can I know who own this issue and when it could fix? Thanks.

[Shane79717]

Can I know who own this issue and when it could fix? Thanks.

I do not own this particular issue. There is a workaround using Vanilla JavaScript to find the DOM element through the class name or ID, and then append the aria-label attribute onto the element. Another approach is wrapping the AceEditor component with the label element, which should hopefully resolve the accessibility issue mentioned above. The second option should be much quicker, rather then interrogating the DOM.

[masonmullendore-ti]

Is there an estimated time on getting this issue fixed?

[akshilverma]

Hi,

Do we have any idea if and when this will get fixed?

[YoniChechik]

This is how I did it in react:

<AceEditor
...
onLoad={(editor) => {
  ....
  editor.textInput.getElement().ariaLabel = "editorTextarea";
}}
/>

[mateBe95]

It doesn't work @YoniChechik hmm

I realize that you need to have enabled new option: keyboardAccessibilityMode