fix(file-input): read file input label when browse button is focused

vmware-clarity · Dec 20, 2024 · 8a025cf · 8a025cf
1 parent 71e6d5d
commit 8a025cf
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -2667,13 +2667,17 @@ export class ClrLabel implements OnInit, OnDestroy {
     // (undocumented)
     forAttr: string;
     // (undocumented)
+    idAttr: string;
+    // (undocumented)
+    idInput: string;
+    // (undocumented)
     get labelText(): string;
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrLabel, "label", never, { "forAttr": "for"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrLabel, "label", never, { "idInput": "id"; "forAttr": "for"; }, {}, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrLabel, [{ optional: true; }, { optional: true; }, { optional: true; }, null, null]>;
 }
@@ -3642,8 +3646,7 @@ export class ClrSignpostContent extends AbstractPopover implements OnDestroy {
     // (undocumented)
     signpostContentId: string;
     // (undocumented)
-
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrSignpostContent, "clr-signpost-content", never, {  "signpostCloseAriaLabel": "clrSignpostCloseAriaLabel"; "position": "clrPosition"; }, {}, never, ["clr-signpost-title", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrSignpostContent, "clr-signpost-content", never, { "signpostCloseAriaLabel": "clrSignpostCloseAriaLabel"; "position": "clrPosition"; }, {}, never, ["clr-signpost-title", "*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrSignpostContent, [null, { optional: true; }, null, null, null, null, null]>;
 }

diff --git a/projects/angular/src/forms/common/label.ts b/projects/angular/src/forms/common/label.ts
@@ -16,6 +16,9 @@ import { NgControlService } from './providers/ng-control.service';
   selector: 'label',
 })
 export class ClrLabel implements OnInit, OnDestroy {
+  @Input('id') idInput: string;
+  @HostBinding('attr.id') idAttr: string;
+
   @Input('for') @HostBinding('attr.for') forAttr: string;
 
   private enableGrid = true;
@@ -50,7 +53,12 @@ export class ClrLabel implements OnInit, OnDestroy {
       this.renderer.addClass(this.el.nativeElement, `clr-col-md-${this.layoutService.labelSize}`);
     }
     if (this.controlIdService && !this.forAttr) {
-      this.subscriptions.push(this.controlIdService.idChange.subscribe(id => (this.forAttr = id)));
+      this.subscriptions.push(
+        this.controlIdService.idChange.subscribe(id => {
+          this.forAttr = id;
+          this.idAttr = this.idInput || `${id}-label`;
+        })
+      );
     }
   }
 

diff --git a/projects/angular/src/forms/file-input/file-input-container.ts b/projects/angular/src/forms/file-input/file-input-container.ts
@@ -86,7 +86,7 @@ export class ClrFileInputContainer extends ClrAbstractContainer {
   }
 
   protected get browseButtonDescribedBy() {
-    return this.fileInput.elementRef.nativeElement.getAttribute('aria-describedby');
+    return `${this.label?.idAttr} ${this.fileInput.elementRef.nativeElement.getAttribute('aria-describedby')}`;
   }
 
   protected browse() {