From 946a816dce2b8bc2119c4c806b99a81797861d86 Mon Sep 17 00:00:00 2001
From: Kevin Buhmann <kbuhmann@vmware.com>
Date: Fri, 20 Dec 2024 05:32:19 -0600
Subject: [PATCH] fix(file-input): read file input label when browse button is
 focused (#1652)

---
 projects/angular/clarity.api.md                        |  9 ++++++---
 projects/angular/src/forms/common/label.ts             | 10 +++++++++-
 .../src/forms/file-input/file-input-container.ts       |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
index cd6fc16a36..55ce539a45 100644
--- 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
index 74dfbc7106..24e1ce1bcb 100644
--- 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
index 48887bb589..f05c3efa9a 100644
--- 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() {