diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/README.md b/packages/ui-source-code-editor/src/SourceCodeEditor/README.md index f663935cbc..5801ffa970 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/README.md +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/README.md @@ -231,7 +231,7 @@ class LanguageExamples extends React.Component { { diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/__new-tests__/SourceCodeEditor.test.tsx b/packages/ui-source-code-editor/src/SourceCodeEditor/__new-tests__/SourceCodeEditor.test.tsx index 655319fb89..84a2fce319 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/__new-tests__/SourceCodeEditor.test.tsx +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/__new-tests__/SourceCodeEditor.test.tsx @@ -44,5 +44,19 @@ describe('', () => { expect(activeLine[1]).toHaveStyle({ color: '#0000ff' }) expect(activeLine[2]).toHaveStyle({ color: '#116644' }) }) + + it('should link editor element to label using aria-labelledby attribute', async () => { + const { container } = render( + + ) + const editorElement = container.querySelector('[role="textbox"]') + const labelId = container.querySelector('[class$="-label"]')?.id + + expect(editorElement).toHaveAttribute('aria-labelledby', labelId) + }) }) }) diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx b/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx index 2984ce4d34..c227ec1a17 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx @@ -302,6 +302,7 @@ class SourceCodeEditor extends Component { if (indentOnLoad) { this.indentAll() } + this.assignAriaLabel() } componentWillUnmount() { @@ -644,6 +645,15 @@ class SourceCodeEditor extends Component { } } + assignAriaLabel = () => { + if (this._containerRef) { + const editorDiv = this._containerRef.querySelector('[role="textbox"]') + if (editorDiv) { + editorDiv.setAttribute('aria-labelledby', `${this._id}`) + } + } + } + render() { const { label, styles, ...restProps } = this.props @@ -655,7 +665,7 @@ class SourceCodeEditor extends Component { omitProps(restProps, SourceCodeEditor.allowedProps) )} > -