feat: allow labels to be hidden but accessible by screen readers (#2920)

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

Author: Akshat55

src/combobox/combobox.component.ts

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

src/combobox/combobox.stories.ts

@@ -28,6 +28,7 @@ export default {
 	],
 	args: {
 		label: "Label",
+		hideLabel: false,
 		helperText: "Optional helper text",
 		disabled: false,
 		invalid: false,
@@ -111,6 +112,7 @@ const Template = (args) => ({
 			[warn]="warn"
 			[warnText]="warnText"
 			[label]="label"
+			[hideLabel]="hideLabel"
 			[helperText]="helperText"
 			[items]="items"
 			[theme]="theme"
@@ -180,6 +182,7 @@ const MultiTemplate = (args) => ({
 			[invalid]="invalid"
 			[invalidText]="invalidText"
 			[label]="label"
+			[hideLabel]="hideLabel"
 			[warn]="warn"
 			[disabled]="disabled"
 			[size]="size"

src/dropdown/dropdown.component.ts

@@ -59,7 +59,10 @@ import { hasScrollableParents } from "carbon-components-angular/utils";
 		*ngIf="label && !skeleton"
 		[for]="id"
 		class="cds--label"
-		[ngClass]="{'cds--label--disabled': disabled}">
+		[ngClass]="{
+			'cds--label--disabled': disabled,
+			'cds--visually-hidden': hideLabel
+		}">
 		<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
 		<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
 	</label>
@@ -183,6 +186,10 @@ export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDest
 	 * Label for the dropdown.
 	 */
 	@Input() label: string | TemplateRef<any>;
+	/**
+	 * Hide label while keeping it accessible for screen readers
+	 */
+	@Input() hideLabel = false;
 	/**
 	 * Sets the optional helper text.
 	 */

src/dropdown/dropdown.stories.ts

@@ -22,6 +22,7 @@ export default {
 	],
 	args: {
 		label: "Label",
+		hideLabel: false,
 		helperText: "Optional helper text",
 		disabled: false,
 		invalid: false,
@@ -88,6 +89,7 @@ const Template = (args) => ({
 	template: `
 		<cds-dropdown
 			[label]="label"
+			[hideLabel]="hideLabel"
 			[skeleton]="skeleton"
 			[helperText]="helperText"
 			[size]="size"
@@ -115,6 +117,7 @@ const MultiTemplate = (args) => ({
 			[selectionFeedback]="selectionFeedback"
 			[(ngModel)]="model"
 			[label]="label"
+			[hideLabel]="hideLabel"
 			[helperText]="helperText"
 			[size]="size"
 			[dropUp]="dropUp"
@@ -144,6 +147,7 @@ const ReactiveTemplate = (args) => ({
 		-->
 		<app-reactive-forms
 			[label]="label"
+			[hideLabel]="hideLabel"
 			[helperText]="helperText"
 			[invalid]="invalid"
 			[invalidText]="invalidText"
@@ -161,6 +165,8 @@ const NgTemplate = (args) => ({
 	props: args,
 	template: `
 		<cds-dropdown
+			[label]="label"
+			[hideLabel]="hideLabel"
 			[theme]="theme"
 			placeholder="Select"
 			[displayValue]="dropdownRenderer"

src/dropdown/stories/app-reactive-forms.component.ts

@@ -18,6 +18,7 @@ import {
 			<div style="width: 300px">
 				<cds-dropdown
 					[label]="label"
+					[hideLabel]="hideLabel"
 					[helperText]="helperText"
 					[invalid]="invalid"
 					[invalidText]="invalidText"
@@ -41,6 +42,7 @@ export class ReactiveFormsStory implements OnInit {
 
 	@Input() items = [];
 	@Input() label = "";
+	@Input() hideLabel = false;
 	@Input() helperText = "";
 	@Input() invalid = false;
 	@Input() invalidText = "";

src/input/password.spec.ts

@@ -15,7 +15,7 @@ import { Tooltip } from "../tooltip";
 })
 class TestPasswordInputComponent {}
 
-fdescribe("Password", () => {
+describe("Password", () => {
 	let fixture: ComponentFixture<TestPasswordInputComponent>;
 	let component: TestPasswordInputComponent;
 	let passwordEl: DebugElement;