fix: add labelID to label so screen readers can read the label

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

src/combobox/combobox.component.ts

@@ -40,8 +40,12 @@ import { Observable } from "rxjs";
 			<label
 				*ngIf="label"
 				[for]="id"
+				[id]="labelId"
 				class="bx--label"
-				[ngClass]="{'bx--label--disabled': disabled}">
+				[ngClass]="{
+					'bx--label--disabled': disabled,
+					'bx--visually-hidden': hideLabel
+				}">
 				<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
 				<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
 			</label>
@@ -105,7 +109,7 @@ import { Observable } from "rxjs";
 						[ngClass]="{'bx--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"
@@ -253,6 +257,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.
 	 *
@@ -298,6 +303,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	 * Label for the combobox.
 	 */
 	@Input() label: string | TemplateRef<any>;
+	/**
+	 * Hide label while keeping it available for screen readers
+	 */
+	@Input() hideLabel = false;
 	/**
 	 * Sets the optional helper text.
 	 */

src/combobox/combobox.stories.ts

@@ -29,6 +29,7 @@ const getOptions = (override = {}) => {
 		warn: boolean("Show the warning state", false),
 		warnText: text("Text for the warning", "This is a warning"),
 		label: text("Label", "ComboBox label"),
+		hideLabel: boolean("Hide label", false),
 		helperText: text("Helper text", "Optional helper text."),
 		items: object("items", [
 			{ content: "one" },
@@ -131,7 +132,8 @@ class DynamicListComboBox implements AfterViewInit {
 				[invalidText]="invalidText"
 				[warn]="warn"
 				[warnText]="warnText"
-				[items]="_items">
+				[items]="_items"
+				[hideLabel]="hideLabel">
 				<ibm-dropdown-list></ibm-dropdown-list>
 			</ibm-combo-box>
 			selected: {{ sampleForm.get("combobox").value | json }}
@@ -147,7 +149,8 @@ class DynamicListComboBox implements AfterViewInit {
 				[invalidText]="invalidText"
 				[warn]="warn"
 				[warnText]="warnText"
-				[items]="_items">
+				[items]="_items"
+				[hideLabel]="hideLabel">
 				<ibm-dropdown-list></ibm-dropdown-list>
 			</ibm-combo-box>
 			selected: {{ sampleForm.get("multibox").value | json }}
@@ -164,6 +167,7 @@ class ReactiveFormsCombobox implements OnInit {
 	@Input() helperText = "";
 	@Input() size = "md";
 	@Input() theme = "dark";
+	@Input() hideLabel = false;
 	@Input() set items(newItems) {
 		if (!isEqual(this._items, newItems)) {
 			this._items = newItems;
@@ -290,6 +294,7 @@ storiesOf("Components|Combobox", module)
 					[warn]="warn"
 					[warnText]="warnText"
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[helperText]="helperText"
 					[items]="items"
 					[theme]="theme"
@@ -322,6 +327,7 @@ storiesOf("Components|Combobox", module)
 					[size]="size"
 					[invalidText]="invalidText"
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[helperText]="helperText"
 					[items]="items"
 					[theme]="theme"
@@ -347,6 +353,7 @@ storiesOf("Components|Combobox", module)
 					[size]="size"
 					[invalidText]="invalidText"
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[helperText]="helperText"
 					[items]="items"
 					[theme]="theme"
@@ -382,6 +389,7 @@ storiesOf("Components|Combobox", module)
 					[invalid]="invalid"
 					[invalidText]="invalidText"
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[size]="size"
 					[helperText]="helperText"
 					[items]="items"
@@ -421,6 +429,7 @@ storiesOf("Components|Combobox", module)
 					[invalid]="invalid"
 					[invalidText]="invalidText"
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[warn]="warn"
 					[disabled]="disabled"
 					[size]="size"
@@ -472,6 +481,7 @@ storiesOf("Components|Combobox", module)
 					[invalid]="invalid"
 					[invalidText]="invalidText"
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[helperText]="helperText"
 					[items]="items"
 					[theme]="theme"
@@ -508,6 +518,7 @@ storiesOf("Components|Combobox", module)
 					[invalid]="invalid"
 					[invalidText]="invalidText"
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[size]="size"
 					itemValueKey="content"
 					[helperText]="helperText"