fix: Ensure screenreaders read combobox label (#2919)

Signed-off-by: Akshat Patel <[email protected]>
carbon-design-system · Jun 13, 2024 · 9135eeb · 9135eeb
1 parent e167388
commit 9135eeb
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/combobox/combobox.component.ts b/src/combobox/combobox.component.ts
@@ -44,6 +44,7 @@ import { Observable } from "rxjs";
 			<label
 				*ngIf="label"
 				[for]="id"
+				[id]="labelId"
 				class="cds--label"
 				[ngClass]="{'cds--label--disabled': disabled}">
 				<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
@@ -110,7 +111,7 @@ import { Observable } from "rxjs";
 						[ngClass]="{'cds--text-input--empty': !showClearButton}"
 						tabindex="0"
 						[id]="id"
-						[attr.aria-labelledby]="id"
+						[attr.aria-labelledby]="labelId"
 						[attr.aria-expanded]="open"
 						aria-haspopup="listbox"
 						[attr.maxlength]="maxLength"
@@ -258,6 +259,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	}
 	static comboBoxCount = 0;
 	@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;
+	@Input() labelId = `dropdown-label-${ComboBox.comboBoxCount++}`;
 	/**
 	 * List of items to fill the content with.
 	 *