@instructure/ui-source-code-editor 10.11.1-snapshot-5 → 10.11.1-snapshot-6

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.11.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-5) (2025-02-10)
+## [10.11.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-6) (2025-02-11)
 
-**Note:** Version bump only for package @instructure/ui-source-code-editor
+
+### Bug Fixes
+
+* **ui-sourcecodeeditor:** link label to input field programmatically ([b092b45](https://github.com/instructure/instructure-ui/commit/b092b457777c2dea480c09da87989cf985a1713e))
 
 
 

package/es/SourceCodeEditor/__new-tests__/SourceCodeEditor.test.js

@@ -1,4 +1,4 @@
-var _SourceCodeEditor;
+var _SourceCodeEditor, _SourceCodeEditor2;
 /*
  * The MIT License (MIT)
  *
@@ -47,5 +47,17 @@ describe('<SourceCodeEditor />', () => {
         color: '#116644'
       });
     });
+    it('should link editor element to label using aria-labelledby attribute', async () => {
+      var _container$querySelec;
+      const _render2 = render(_SourceCodeEditor2 || (_SourceCodeEditor2 = /*#__PURE__*/React.createElement(SourceCodeEditor, {
+          label: "test",
+          language: "jsx",
+          defaultValue: "const a = 2;"
+        }))),
+        container = _render2.container;
+      const editorElement = container.querySelector('[role="textbox"]');
+      const labelId = (_container$querySelec = container.querySelector('[class$="-label"]')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.id;
+      expect(editorElement).toHaveAttribute('aria-labelledby', labelId);
+    });
   });
 });

package/es/SourceCodeEditor/index.js

@@ -195,6 +195,14 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
         containerRef(el);
       }
     };
+    this.assignAriaLabel = () => {
+      if (this._containerRef) {
+        const editorDiv = this._containerRef.querySelector('[role="textbox"]');
+        if (editorDiv) {
+          editorDiv.setAttribute('aria-labelledby', `${this._id}`);
+        }
+      }
+    };
     this._id = props.deterministicId();
   }
   componentDidMount() {
@@ -219,6 +227,7 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     if (indentOnLoad) {
       this.indentAll();
     }
+    this.assignAriaLabel();
   }
   componentWillUnmount() {
     var _this$_editorView5;
@@ -487,7 +496,7 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       css: styles === null || styles === void 0 ? void 0 : styles.codeEditor
     }, passthroughProps(omitProps(restProps, SourceCodeEditor.allowedProps))), jsx("label", {
       css: styles === null || styles === void 0 ? void 0 : styles.label,
-      htmlFor: this._id
+      id: this._id
     }, jsx(ScreenReaderContent, null, label), jsx("div", {
       ref: this.handleContainerRef,
       css: styles === null || styles === void 0 ? void 0 : styles.codeEditorContainer

package/lib/SourceCodeEditor/__new-tests__/SourceCodeEditor.test.js

@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _index = _interopRequireDefault(require("../index"));
 require("@testing-library/jest-dom");
-var _SourceCodeEditor;
+var _SourceCodeEditor, _SourceCodeEditor2;
 /*
  * The MIT License (MIT)
  *
@@ -50,5 +50,17 @@ describe('<SourceCodeEditor />', () => {
         color: '#116644'
       });
     });
+    it('should link editor element to label using aria-labelledby attribute', async () => {
+      var _container$querySelec;
+      const _render2 = (0, _react2.render)(_SourceCodeEditor2 || (_SourceCodeEditor2 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          label: "test",
+          language: "jsx",
+          defaultValue: "const a = 2;"
+        }))),
+        container = _render2.container;
+      const editorElement = container.querySelector('[role="textbox"]');
+      const labelId = (_container$querySelec = container.querySelector('[class$="-label"]')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.id;
+      expect(editorElement).toHaveAttribute('aria-labelledby', labelId);
+    });
   });
 });

package/lib/SourceCodeEditor/index.js

@@ -202,6 +202,14 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
         containerRef(el);
       }
     };
+    this.assignAriaLabel = () => {
+      if (this._containerRef) {
+        const editorDiv = this._containerRef.querySelector('[role="textbox"]');
+        if (editorDiv) {
+          editorDiv.setAttribute('aria-labelledby', `${this._id}`);
+        }
+      }
+    };
     this._id = props.deterministicId();
   }
   componentDidMount() {
@@ -226,6 +234,7 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     if (indentOnLoad) {
       this.indentAll();
     }
+    this.assignAriaLabel();
   }
   componentWillUnmount() {
     var _this$_editorView5;
@@ -494,7 +503,7 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
       css: styles === null || styles === void 0 ? void 0 : styles.codeEditor
     }, (0, _passthroughProps.passthroughProps)((0, _omitProps.omitProps)(restProps, SourceCodeEditor.allowedProps))), (0, _emotion.jsx)("label", {
       css: styles === null || styles === void 0 ? void 0 : styles.label,
-      htmlFor: this._id
+      id: this._id
     }, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, label), (0, _emotion.jsx)("div", {
       ref: this.handleContainerRef,
       css: styles === null || styles === void 0 ? void 0 : styles.codeEditorContainer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "10.11.1-snapshot-5",
+  "version": "10.11.1-snapshot-6",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-5",
-    "@instructure/ui-test-queries": "10.11.1-snapshot-5",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-5",
+    "@instructure/ui-babel-preset": "10.11.1-snapshot-6",
+    "@instructure/ui-test-queries": "10.11.1-snapshot-6",
+    "@instructure/ui-test-utils": "10.11.1-snapshot-6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"
@@ -45,20 +45,20 @@
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
-    "@instructure/emotion": "10.11.1-snapshot-5",
-    "@instructure/shared-types": "10.11.1-snapshot-5",
-    "@instructure/ui-a11y-content": "10.11.1-snapshot-5",
-    "@instructure/ui-buttons": "10.11.1-snapshot-5",
-    "@instructure/ui-dom-utils": "10.11.1-snapshot-5",
-    "@instructure/ui-i18n": "10.11.1-snapshot-5",
-    "@instructure/ui-icons": "10.11.1-snapshot-5",
-    "@instructure/ui-prop-types": "10.11.1-snapshot-5",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-5",
-    "@instructure/ui-test-locator": "10.11.1-snapshot-5",
-    "@instructure/ui-testable": "10.11.1-snapshot-5",
-    "@instructure/ui-text-input": "10.11.1-snapshot-5",
-    "@instructure/ui-themes": "10.11.1-snapshot-5",
-    "@instructure/ui-utils": "10.11.1-snapshot-5",
+    "@instructure/emotion": "10.11.1-snapshot-6",
+    "@instructure/shared-types": "10.11.1-snapshot-6",
+    "@instructure/ui-a11y-content": "10.11.1-snapshot-6",
+    "@instructure/ui-buttons": "10.11.1-snapshot-6",
+    "@instructure/ui-dom-utils": "10.11.1-snapshot-6",
+    "@instructure/ui-i18n": "10.11.1-snapshot-6",
+    "@instructure/ui-icons": "10.11.1-snapshot-6",
+    "@instructure/ui-prop-types": "10.11.1-snapshot-6",
+    "@instructure/ui-react-utils": "10.11.1-snapshot-6",
+    "@instructure/ui-test-locator": "10.11.1-snapshot-6",
+    "@instructure/ui-testable": "10.11.1-snapshot-6",
+    "@instructure/ui-text-input": "10.11.1-snapshot-6",
+    "@instructure/ui-themes": "10.11.1-snapshot-6",
+    "@instructure/ui-utils": "10.11.1-snapshot-6",
     "@lezer/highlight": "1.2.1",
     "prop-types": "^15.8.1"
   },

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

package/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)
+    })
   })
 })

package/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}