Merge pull request #2918 from Akshat55/combobox-label-readaloud

fix: allow labels to be read for combobox and hide labels but keep them accessible to screen reader
carbon-design-system · Jun 12, 2024 · ab09b91 · ab09b91
2 parents 075b069 + 204dc52
commit ab09b91
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/src/combobox/combobox.component.ts b/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.
 	 */

diff --git a/src/combobox/combobox.stories.ts b/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"

diff --git a/src/dropdown/dropdown.component.ts b/src/dropdown/dropdown.component.ts
@@ -55,7 +55,10 @@ import { hasScrollableParents } from "carbon-components-angular/utils";
 		*ngIf="label"
 		[for]="id"
 		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>
@@ -176,6 +179,10 @@ export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDest
 	 * Label for the dropdown.
 	 */
 	@Input() label: string | TemplateRef<any>;
+	/**
+	 * Hide label while keeping it available for screen readers
+	 */
+	@Input() hideLabel = false;
 	/**
 	 * Sets the optional helper text.
 	 */

diff --git a/src/dropdown/dropdown.stories.ts b/src/dropdown/dropdown.stories.ts
@@ -58,6 +58,7 @@ const getProps = (overrides = {}) => Object.assign({}, {
 	warnText: text("Text for the warning", "This is a warning"),
 	disabled: boolean("disabled", false),
 	label: text("Label", "Dropdown label"),
+	hideLabel: boolean("Hide label", false),
 	helperText: text("Helper text", "Optional helper text."),
 	items: object("items", [
 		{ content: "one" },
@@ -84,6 +85,7 @@ const getProps = (overrides = {}) => Object.assign({}, {
 			<div style="width: 300px">
 				<ibm-dropdown
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[helperText]="helperText"
 					[invalid]="invalid"
 					[invalidText]="invalidText"
@@ -109,6 +111,7 @@ class ReactiveFormsStory implements OnInit {
 
 	@Input() items = [];
 	@Input() label = "";
+	@Input() hideLabel = false;
 	@Input() helperText = "";
 	@Input() invalid = false;
 	@Input() invalidText = "";
@@ -192,6 +195,7 @@ storiesOf("Components|Dropdown", module)
 		<div style="width: 300px">
 			<ibm-dropdown
 				[label]="label"
+				[hideLabel]="hideLabel"
 				[helperText]="helperText"
 				[size]="size"
 				[dropUp]="dropUp"
@@ -215,6 +219,7 @@ storiesOf("Components|Dropdown", module)
 		<div style="width: 300px">
 			<ibm-dropdown
 				[label]="label"
+				[hideLabel]="hideLabel"
 				[helperText]="helperText"
 				[size]="size"
 				[dropUp]="dropUp"
@@ -241,6 +246,7 @@ storiesOf("Components|Dropdown", module)
 			<ibm-dropdown
 				type="multi"
 				[label]="label"
+				[hideLabel]="hideLabel"
 				[helperText]="helperText"
 				[size]="size"
 				[dropUp]="dropUp"
@@ -272,6 +278,7 @@ storiesOf("Components|Dropdown", module)
 		<div style="width: 300px">
 			<ibm-dropdown
 				[label]="label"
+				[hideLabel]="hideLabel"
 				[helperText]="helperText"
 				[size]="size"
 				[invalid]="invalid"
@@ -313,6 +320,7 @@ storiesOf("Components|Dropdown", module)
 			-->
 			<app-reactive-forms
 				[label]="label"
+				[hideLabel]="hideLabel"
 				[helperText]="helperText"
 				[invalid]="invalid"
 				[invalidText]="invalidText"
@@ -346,6 +354,7 @@ storiesOf("Components|Dropdown", module)
 		<div style="width: 300px">
 			<ibm-dropdown
 				[label]="label"
+				[hideLabel]="hideLabel"
 				[helperText]="helperText"
 				[invalid]="invalid"
 				[invalidText]="invalidText"