Skip to content

Commit ab09b91

Browse files
Akshat55Akshat55
authored
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
2 parents 075b069 + 204dc52 commit ab09b91

File tree

4 files changed

+41
-5
lines changed

4 files changed

+41
-5
lines changed

‎src/combobox/combobox.component.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,12 @@ import { Observable } from "rxjs";
4040
<label
4141
*ngIf="label"
4242
[for]="id"
43+
[id]="labelId"
4344
class="bx--label"
44-
[ngClass]="{'bx--label--disabled': disabled}">
45+
[ngClass]="{
46+
'bx--label--disabled': disabled,
47+
'bx--visually-hidden': hideLabel
48+
}">
4549
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
4650
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
4751
</label>
@@ -105,7 +109,7 @@ import { Observable } from "rxjs";
105109
[ngClass]="{'bx--text-input--empty': !showClearButton}"
106110
tabindex="0"
107111
[id]="id"
108-
[attr.aria-labelledby]="id"
112+
[attr.aria-labelledby]="labelId"
109113
[attr.aria-expanded]="open"
110114
aria-haspopup="listbox"
111115
[attr.maxlength]="maxLength"
@@ -253,6 +257,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
253257
}
254258
static comboBoxCount = 0;
255259
@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;
260+
@Input() labelId = `dropdown-label-${ComboBox.comboBoxCount++}`;
256261
/**
257262
* List of items to fill the content with.
258263
*
@@ -298,6 +303,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
298303
* Label for the combobox.
299304
*/
300305
@Input() label: string | TemplateRef<any>;
306+
/**
307+
* Hide label while keeping it available for screen readers
308+
*/
309+
@Input() hideLabel = false;
301310
/**
302311
* Sets the optional helper text.
303312
*/

‎src/combobox/combobox.stories.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const getOptions = (override = {}) => {
2929
warn: boolean("Show the warning state", false),
3030
warnText: text("Text for the warning", "This is a warning"),
3131
label: text("Label", "ComboBox label"),
32+
hideLabel: boolean("Hide label", false),
3233
helperText: text("Helper text", "Optional helper text."),
3334
items: object("items", [
3435
{ content: "one" },
@@ -131,7 +132,8 @@ class DynamicListComboBox implements AfterViewInit {
131132
[invalidText]="invalidText"
132133
[warn]="warn"
133134
[warnText]="warnText"
134-
[items]="_items">
135+
[items]="_items"
136+
[hideLabel]="hideLabel">
135137
<ibm-dropdown-list></ibm-dropdown-list>
136138
</ibm-combo-box>
137139
selected: {{ sampleForm.get("combobox").value | json }}
@@ -147,7 +149,8 @@ class DynamicListComboBox implements AfterViewInit {
147149
[invalidText]="invalidText"
148150
[warn]="warn"
149151
[warnText]="warnText"
150-
[items]="_items">
152+
[items]="_items"
153+
[hideLabel]="hideLabel">
151154
<ibm-dropdown-list></ibm-dropdown-list>
152155
</ibm-combo-box>
153156
selected: {{ sampleForm.get("multibox").value | json }}
@@ -164,6 +167,7 @@ class ReactiveFormsCombobox implements OnInit {
164167
@Input() helperText = "";
165168
@Input() size = "md";
166169
@Input() theme = "dark";
170+
@Input() hideLabel = false;
167171
@Input() set items(newItems) {
168172
if (!isEqual(this._items, newItems)) {
169173
this._items = newItems;
@@ -290,6 +294,7 @@ storiesOf("Components|Combobox", module)
290294
[warn]="warn"
291295
[warnText]="warnText"
292296
[label]="label"
297+
[hideLabel]="hideLabel"
293298
[helperText]="helperText"
294299
[items]="items"
295300
[theme]="theme"
@@ -322,6 +327,7 @@ storiesOf("Components|Combobox", module)
322327
[size]="size"
323328
[invalidText]="invalidText"
324329
[label]="label"
330+
[hideLabel]="hideLabel"
325331
[helperText]="helperText"
326332
[items]="items"
327333
[theme]="theme"
@@ -347,6 +353,7 @@ storiesOf("Components|Combobox", module)
347353
[size]="size"
348354
[invalidText]="invalidText"
349355
[label]="label"
356+
[hideLabel]="hideLabel"
350357
[helperText]="helperText"
351358
[items]="items"
352359
[theme]="theme"
@@ -382,6 +389,7 @@ storiesOf("Components|Combobox", module)
382389
[invalid]="invalid"
383390
[invalidText]="invalidText"
384391
[label]="label"
392+
[hideLabel]="hideLabel"
385393
[size]="size"
386394
[helperText]="helperText"
387395
[items]="items"
@@ -421,6 +429,7 @@ storiesOf("Components|Combobox", module)
421429
[invalid]="invalid"
422430
[invalidText]="invalidText"
423431
[label]="label"
432+
[hideLabel]="hideLabel"
424433
[warn]="warn"
425434
[disabled]="disabled"
426435
[size]="size"
@@ -472,6 +481,7 @@ storiesOf("Components|Combobox", module)
472481
[invalid]="invalid"
473482
[invalidText]="invalidText"
474483
[label]="label"
484+
[hideLabel]="hideLabel"
475485
[helperText]="helperText"
476486
[items]="items"
477487
[theme]="theme"
@@ -508,6 +518,7 @@ storiesOf("Components|Combobox", module)
508518
[invalid]="invalid"
509519
[invalidText]="invalidText"
510520
[label]="label"
521+
[hideLabel]="hideLabel"
511522
[size]="size"
512523
itemValueKey="content"
513524
[helperText]="helperText"

‎src/dropdown/dropdown.component.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,10 @@ import { hasScrollableParents } from "carbon-components-angular/utils";
5555
*ngIf="label"
5656
[for]="id"
5757
class="bx--label"
58-
[ngClass]="{'bx--label--disabled': disabled}">
58+
[ngClass]="{
59+
'bx--label--disabled': disabled,
60+
'bx--visually-hidden': hideLabel
61+
}">
5962
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
6063
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
6164
</label>
@@ -176,6 +179,10 @@ export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDest
176179
* Label for the dropdown.
177180
*/
178181
@Input() label: string | TemplateRef<any>;
182+
/**
183+
* Hide label while keeping it available for screen readers
184+
*/
185+
@Input() hideLabel = false;
179186
/**
180187
* Sets the optional helper text.
181188
*/

‎src/dropdown/dropdown.stories.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ const getProps = (overrides = {}) => Object.assign({}, {
5858
warnText: text("Text for the warning", "This is a warning"),
5959
disabled: boolean("disabled", false),
6060
label: text("Label", "Dropdown label"),
61+
hideLabel: boolean("Hide label", false),
6162
helperText: text("Helper text", "Optional helper text."),
6263
items: object("items", [
6364
{ content: "one" },
@@ -84,6 +85,7 @@ const getProps = (overrides = {}) => Object.assign({}, {
8485
<div style="width: 300px">
8586
<ibm-dropdown
8687
[label]="label"
88+
[hideLabel]="hideLabel"
8789
[helperText]="helperText"
8890
[invalid]="invalid"
8991
[invalidText]="invalidText"
@@ -109,6 +111,7 @@ class ReactiveFormsStory implements OnInit {
109111

110112
@Input() items = [];
111113
@Input() label = "";
114+
@Input() hideLabel = false;
112115
@Input() helperText = "";
113116
@Input() invalid = false;
114117
@Input() invalidText = "";
@@ -192,6 +195,7 @@ storiesOf("Components|Dropdown", module)
192195
<div style="width: 300px">
193196
<ibm-dropdown
194197
[label]="label"
198+
[hideLabel]="hideLabel"
195199
[helperText]="helperText"
196200
[size]="size"
197201
[dropUp]="dropUp"
@@ -215,6 +219,7 @@ storiesOf("Components|Dropdown", module)
215219
<div style="width: 300px">
216220
<ibm-dropdown
217221
[label]="label"
222+
[hideLabel]="hideLabel"
218223
[helperText]="helperText"
219224
[size]="size"
220225
[dropUp]="dropUp"
@@ -241,6 +246,7 @@ storiesOf("Components|Dropdown", module)
241246
<ibm-dropdown
242247
type="multi"
243248
[label]="label"
249+
[hideLabel]="hideLabel"
244250
[helperText]="helperText"
245251
[size]="size"
246252
[dropUp]="dropUp"
@@ -272,6 +278,7 @@ storiesOf("Components|Dropdown", module)
272278
<div style="width: 300px">
273279
<ibm-dropdown
274280
[label]="label"
281+
[hideLabel]="hideLabel"
275282
[helperText]="helperText"
276283
[size]="size"
277284
[invalid]="invalid"
@@ -313,6 +320,7 @@ storiesOf("Components|Dropdown", module)
313320
-->
314321
<app-reactive-forms
315322
[label]="label"
323+
[hideLabel]="hideLabel"
316324
[helperText]="helperText"
317325
[invalid]="invalid"
318326
[invalidText]="invalidText"
@@ -346,6 +354,7 @@ storiesOf("Components|Dropdown", module)
346354
<div style="width: 300px">
347355
<ibm-dropdown
348356
[label]="label"
357+
[hideLabel]="hideLabel"
349358
[helperText]="helperText"
350359
[invalid]="invalid"
351360
[invalidText]="invalidText"

0 commit comments

Comments
 (0)