fix: allow labels to be hidden but accessibile to screen readers

Signed-off-by: Akshat Patel <[email protected]>
carbon-design-system · Jun 12, 2024 · baaeb17 · baaeb17
1 parent b60e9c1
commit baaeb17
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
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"