From b092b457777c2dea480c09da87989cf985a1713e Mon Sep 17 00:00:00 2001
From: Tamas Kovacs <tamas.kovacs@instructure.com>
Date: Fri, 7 Feb 2025 12:51:45 +0100
Subject: [PATCH] fix(ui-sourcecodeeditor): link label to input field
 programmatically

---
 .../src/SourceCodeEditor/README.md                 |  2 +-
 .../__new-tests__/SourceCodeEditor.test.tsx        | 14 ++++++++++++++
 .../src/SourceCodeEditor/index.tsx                 | 12 +++++++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

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 {
         <Flex.Item padding="0 0 0 large" shouldGrow shouldShrink>
           <FormField label="SourceCodeEditor with syntax highlight">
             <SourceCodeEditor
-              label={`${this.state.currentLanguage} code editor`}
+              label={`${this.state.currentLanguage} SourceCodeEditor with syntax highlight`}
               language={this.state.currentLanguage}
               value={this.state.currentValue}
               onChange={(value) => {
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('<SourceCodeEditor />', () => {
       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(
+        <SourceCodeEditor
+          label="test"
+          language="jsx"
+          defaultValue="const a = 2;"
+        />
+      )
+      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<SourceCodeEditorProps> {
     if (indentOnLoad) {
       this.indentAll()
     }
+    this.assignAriaLabel()
   }
 
   componentWillUnmount() {
@@ -644,6 +645,15 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
     }
   }
 
+  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<SourceCodeEditorProps> {
           omitProps(restProps, SourceCodeEditor.allowedProps)
         )}
       >
-        <label css={styles?.label} htmlFor={this._id}>
+        <label css={styles?.label} id={this._id}>
           <ScreenReaderContent>{label}</ScreenReaderContent>
           <div
             ref={this.handleContainerRef}