fix: editable input have unique id for aria-labelledby (#346)

scttcper · Jun 10, 2021 · 3f919b6 · 3f919b6
1 parent 257d273
commit 3f919b6
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/lib/common/editable-input.component.ts b/src/lib/common/editable-input.component.ts
@@ -13,6 +13,8 @@ import {
 
 import { fromEvent, Subscription } from 'rxjs';
 
+let nextUniqueId = 0;
+
 @Component({
   selector: 'color-editable-input',
   template: `
@@ -26,9 +28,9 @@ import { fromEvent, Subscription } from 'rxjs';
         (keyup)="handleKeyup($event)"
         (focus)="handleFocus($event)"
         (focusout)="handleFocusOut($event)"
-        aria-labelledby="colorEditableInputLabel"
+        [attr.aria-labelledby]="uniqueId"
       />
-      <span id="colorEditableInputLabel" *ngIf="label" [ngStyle]="labelStyle" (mousedown)="handleMousedown($event)">
+      <span [id]="uniqueId" *ngIf="label" [ngStyle]="labelStyle" (mousedown)="handleMousedown($event)">
         {{ label }}
       </span>
     </div>
@@ -66,6 +68,7 @@ export class EditableInputComponent implements OnInit, OnChanges, OnDestroy {
   focus = false;
   mousemove!: Subscription;
   mouseup!: Subscription;
+  uniqueId: string = `editableInput-${++nextUniqueId}`;
 
   ngOnInit() {
     this.wrapStyle = this.style && this.style.wrap ? this.style.wrap : {};