added support for aria-label and aria-labelledby

Author: zamoore

packages/components/src/components/hds/code-editor/index.hbs

@@ -13,7 +13,12 @@
   {{#if (and this._isSetupComplete (or this.hasActions (has-block)))}}
     <div class="hds-code-editor__header">
       <div class="hds-code-editor__header-content">
-        {{yield (hash Title=(component "hds/code-editor/title") Description=(component "hds/code-editor/description"))}}
+        {{yield
+          (hash
+            Title=(component "hds/code-editor/title" onInsert=this._registerTitleElement)
+            Description=(component "hds/code-editor/description")
+          )
+        }}
       </div>
 
       {{#if this.hasActions}}
@@ -38,6 +43,8 @@
     </div>
   {{/if}}
   <div
+    aria-label={{this.ariaLabel}}
+    aria-describedby={{this.ariaLabelledBy}}
     class="hds-code-editor__editor"
     {{hds-code-editor value=@value language=@language onInput=this.onInput onSetup=this.onSetup}}
   />

packages/components/src/components/hds/code-editor/index.ts

@@ -17,6 +17,8 @@ import type { EditorView } from '@codemirror/view';
 
 export interface HdsCodeEditorSignature {
   Args: {
+    ariaLabel?: string;
+    ariaLabelledby?: string;
     hasCopyButton?: boolean;
     hasFullScreenButton?: boolean;
     language?: HdsCodeEditorModifierSignature['Args']['Named']['language'];
@@ -40,6 +42,7 @@ export default class HdsCodeEditor extends Component<HdsCodeEditorSignature> {
   @tracked private _isFullScreen = false;
   @tracked private _isSetupComplete = false;
   @tracked private _value;
+  @tracked private _titleId: string | null = null;
 
   private _handleEscape = modifier(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -65,6 +68,14 @@ export default class HdsCodeEditor extends Component<HdsCodeEditorSignature> {
     }
   }
 
+  get ariaLabel(): string {
+    return this.args.ariaLabel ?? 'Code editor';
+  }
+
+  get ariaLabelledby(): string | null {
+    return this.args.ariaLabelledby ?? this._titleId ?? null;
+  }
+
   get classNames(): string {
     // Currently there is only one theme so the class name is hard-coded.
     // In the future, additional themes such as a "light" theme could be added.
@@ -81,6 +92,11 @@ export default class HdsCodeEditor extends Component<HdsCodeEditorSignature> {
     return (this.args.hasCopyButton || this.args.hasFullScreenButton) ?? false;
   }
 
+  @action
+  registerTitleElement(element: HdsCodeEditorTitleSignature['Element']): void {
+    this._titleId = element.id;
+  }
+
   @action
   toggleFullScreen(): void {
     this._isFullScreen = !this._isFullScreen;

packages/components/src/components/hds/code-editor/title.hbs

@@ -1,3 +1,11 @@
-<Hds::Text::Body class="hds-code-editor__title" @tag={{this.tag}} @size="200" @weight="semibold" ...attributes>
+<Hds::Text::Body
+  id={{this._id}}
+  class="hds-code-editor__title"
+  @tag={{this.tag}}
+  @size="200"
+  @weight="semibold"
+  {{did-insert this.onInsert}}
+  ...attributes
+>
   {{yield}}
 </Hds::Text::Body>

packages/components/src/components/hds/code-editor/title.ts

@@ -7,17 +7,23 @@ import Component from '@glimmer/component';
 
 import type { HdsTextBodySignature } from '../text/body';
 
+type HdsCodeEditorTitleElement = HdsTextBodySignature['Element'];
+
 export interface HdsCodeEditorTitleSignature {
   Args: {
+    editorId: string;
     tag?: HdsTextBodySignature['Args']['tag'];
+    onInsert: (element: HdsCodeEditorTitleElement) => void;
   };
   Blocks: {
     default: [];
   };
-  Element: HdsTextBodySignature['Element'];
+  Element: HdsCodeEditorTitleElement;
 }
 
 export default class HdsCodeEditorTitle extends Component<HdsCodeEditorTitleSignature> {
+  private _id = `${this.args.editorId}-title`;
+
   get tag() {
     return this.args.tag ?? 'h2';
   }