Skip to content

Commit 520feee

Browse files
mfranzkemfranzke
authored
feat(form elements): provide possibility to visually hide the label (#628)
* feat: provide general styling for visually hidden labels * docs: typo * feat: provided the possibility for all forms to visually hide the label * feat: provided the possibility for all forms to visually hide the label * Update _form-elements.scss * refactor: added missing references * refactor: not providing an empty option on hidden label
1 parent e36ea82 commit 520feee

24 files changed

+131
-12
lines changed

‎source/_patterns/01-elements/_form-elements.scss

+6
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@
3333
}
3434
}
3535

36+
%form-label {
37+
&[data-label-hidden="true"] {
38+
@include a11y-visually-hidden($partial: $partial);
39+
}
40+
}
41+
3642
// ### Style variations
3743
// Semitransparent
3844
%form-element-semitransparent {

‎source/_patterns/01-elements/checkbox/checkbox.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
value="{{ value }}"
66
{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
77
{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}>
8-
<label class="elm-label" for="{{ id }}">{{ label }}</label>
8+
<label class="elm-label" for="{{ id }}"{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
99
{{#if indeterminate}}
1010
<script>
1111
document.querySelector('#{{ id }}').indeterminate = true;

‎source/_patterns/01-elements/checkbox/checkbox.scss

+3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
@import "../../../css/partials.meta";
44
@import "checkbox.variables";
5+
@import "../form-elements";
56

67
.elm-checkbox {
78
@include icon("\00A0", 24, "outline", $partial: $partial);
@@ -64,6 +65,8 @@
6465
}
6566

6667
& + label {
68+
@extend %form-label;
69+
6770
margin-left: $db-spacing-xs;
6871
}
6972
}

‎source/_patterns/01-elements/checkbox/checkbox~indeterminate.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Checkbox - indeterminate
44

55
## State: indeterminate
66

7-
Please keep in mind, that the special state of an indeterminate element is necessary to get set programatically with JavaScript:
7+
Please keep in mind, that the special state of an indeterminate element is necessary to get set programmatically with JavaScript:
88

99
```js
1010
inputInstance.indeterminate = true;

‎source/_patterns/01-elements/checkbox/checkbox~label-hidden.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"id": "checkbox05",
3+
"labelHidden": true
4+
}

‎source/_patterns/01-elements/checkbox/checkbox~label-hidden.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Checkbox - Hidden label
3+
---
4+
5+
## Possibility to hide the label
6+
7+
> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
8+
9+
source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
10+
11+
You could set the attribute `data-label-hidden="true"` for the rare case that you would want to visually hide the textual label for a checkbox element.

‎source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Checkbox - indeterminate on dark background
44

55
## State: indeterminate
66

7-
Please keep in mind, that the special state of an indeterminate element is necessary to get set programatically with JavaScript:
7+
Please keep in mind, that the special state of an indeterminate element is necessary to get set programmatically with JavaScript:
88

99
```js
1010
inputInstance.indeterminate = true;

‎source/_patterns/01-elements/input/input.hbs

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
<label class="elm-label"
1616
for="{{ id }}"
1717
aria-hidden="true"
18-
id="{{ id }}-label">{{ label }}</label>
18+
id="{{ id }}-label"
19+
{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
1920
{{#if description }}<p{{#if describedbyid }} id="{{ describedbyid }}"{{/if }} class="description">{{{ description }}}</p>{{/if }}
2021
{{#if datalist }}<datalist id="datalist{{ id }}">
2122
{{#each datalistItems }}

‎source/_patterns/01-elements/input/input.scss

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@charset "utf-8";
22

3+
@import "../../../css/partials.meta";
34
@import "input.variables";
45
@import "../form-elements";
56

@@ -13,10 +14,14 @@
1314
line-height: to-rem($pxValue: 24);
1415
max-width: 100%;
1516

16-
padding: $db-spacing-s $db-spacing-m;
17-
1817
width: 100%;
1918

19+
padding-inline: $db-spacing-m;
20+
// No need to reposition the included value on hidden label
21+
&:not(:has(+ label[data-label-hidden="true"])) {
22+
padding-block: $db-spacing-s;
23+
}
24+
2025
&[list] {
2126
&::-webkit-calendar-picker-indicator {
2227
margin-right: -1rem;
@@ -25,7 +30,10 @@
2530

2631
&:not(:placeholder-shown) {
2732
padding-bottom: 0;
28-
padding-top: to-rem($pxValue: 16);
33+
// No need to reposition the included value on hidden label
34+
&:not(:has(+ label[data-label-hidden="true"])) {
35+
padding-top: to-rem($pxValue: 16);
36+
}
2937
}
3038

3139
// * TODO: to get evaluated
@@ -89,6 +97,8 @@
8997
}
9098

9199
& + .elm-label {
100+
@extend %form-label;
101+
92102
color: $db-color-cool-gray-500;
93103
display: block;
94104
font-size: to-rem($pxValue: 12);

‎source/_patterns/01-elements/input/input~hidden-label.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"id": "input20",
3+
"labelHidden": "true"
4+
}

‎source/_patterns/01-elements/input/input~hidden-label.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Input - Hidden label
3+
state: complete
4+
order: 11
5+
---
6+
7+
## Possibility to hide the label
8+
9+
> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
10+
11+
source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
12+
13+
You could set the attribute `data-label-hidden="true"` for the rare case that you would want to visually hide the textual label for a input element.

‎source/_patterns/01-elements/radio/_radio.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88
{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
99
{{#if invalid}} aria-invalid="true"{{/if }}
1010
{{#if required}} required{{/if}}>
11-
<label class="elm-label" for="{{ id }}">{{ label }}</label>
11+
<label class="elm-label" for="{{ id }}"{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>

‎source/_patterns/01-elements/radio/radio.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@charset "utf-8";
22

3+
@import "../../../css/partials.meta";
34
@import "radio.variables";
5+
@import "../form-elements";
46

57
.elm-radio {
68
appearance: none;
@@ -52,6 +54,8 @@
5254
// }
5355

5456
& + label {
57+
@extend %form-label;
58+
5559
margin-left: $db-spacing-xs;
5660
}
5761

‎source/_patterns/01-elements/radio/radios.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{{#each radios }}
2-
{{> elements-radio disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name }}<br>
2+
{{> elements-radio disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name labelHidden=../labelHidden }}<br>
33
{{/each }}

‎source/_patterns/01-elements/radio/radios~label-hidden.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "radioLabelHidden",
3+
"labelHidden": true
4+
}

‎source/_patterns/01-elements/radio/radios~label-hidden.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Radio - Hidden label
3+
---
4+
5+
## Possibility to hide the label
6+
7+
> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
8+
9+
source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
10+
11+
You could set the attribute `data-label-hidden="true"` for the rare case that you would want to visually hide the textual label for a radio element.

‎source/_patterns/01-elements/select/select.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{{#if required}} required{{/if}}
66
{{#if invalid }} aria-invalid="{{ invalid }}" {{/if }}
77
{{#if variant}} data-variant="{{variant}}"{{/if }}>
8-
{{#if optgroup}}<optgroup label="Devices">{{else}}{{#unless multiple}}<option></option>{{/unless}}{{/if }}
8+
{{#if optgroup}}<optgroup label="Devices">{{else}}{{#unless multiple}}{{#unless labelHidden}}<option></option>{{/unless}}{{/unless}}{{/if }}
99
<option value="smartphone">Smartphone</option>
1010
<option value="softphone">Softphone</option>
1111
<option value="headset">Headset</option>
@@ -18,4 +18,4 @@
1818
<option value="developer">Developer</option>
1919
</optgroup>{{/if }}
2020
</select>
21-
<label class="elm-label" for="{{ id }}">{{ label }}</label>
21+
<label class="elm-label" for="{{ id }}"{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>

‎source/_patterns/01-elements/select/select.scss

+7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../../../css/partials.meta";
12
@import "select.variables";
23
@import "../form-elements";
34
@import "../../../css/db-ui-core.variables";
@@ -27,6 +28,10 @@
2728
background-repeat: no-repeat;
2829
height: to-rem($pxValue: 44);
2930
padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0 $db-spacing-m;
31+
// No need to reposition the included value on hidden label
32+
&:has(+ label[data-label-hidden="true"]) {
33+
padding-top: 0;
34+
}
3035

3136
// Floating labels
3237
& + .elm-label {
@@ -96,6 +101,8 @@
96101

97102
// Floating labels
98103
& + .elm-label {
104+
@extend %form-label;
105+
99106
display: block;
100107
font-size: to-rem($pxValue: 12);
101108
margin-bottom: -#{to-rem($pxValue: 18)};

‎source/_patterns/01-elements/select/select~hidden-label.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"id": "select14",
3+
"label": "Devices",
4+
"labelHidden": "true"
5+
}

‎source/_patterns/01-elements/select/select~hidden-label.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Select - Hidden label
3+
state: complete
4+
order: 8
5+
---
6+
7+
## Possibility to hide the label
8+
9+
> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
10+
11+
source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
12+
13+
You could set the attribute `data-label-hidden="true"` for the rare case that you would want to visually hide the textual label for a select element.

‎source/_patterns/01-elements/textarea/textarea.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{! TODO: the retrieval of the standard values doesn't work so far }}
2-
<label class="elm-label" for="{{ id }}">{{ label }}</label>
2+
<label class="elm-label" for="{{ id }}"{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
33
<textarea class="elm-textarea {{ styleModifier }}"
44
placeholder="{{ placeholder }}"
55
id="{{ id }}"

‎source/_patterns/01-elements/textarea/textarea.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@charset "utf-8";
22

3+
@import "../../../css/partials.meta";
34
@import "textarea.variables";
45
@import "../form-elements";
56

@@ -29,6 +30,10 @@
2930
// align-items: center;
3031
// justify-content: flex-start;
3132

33+
.elm-label:has(+ &) {
34+
@extend %form-label;
35+
}
36+
3237
&:not([rows]) {
3338
max-height: to-rem($pxValue: 600);
3439
min-height: to-rem($pxValue: 120);

‎source/_patterns/01-elements/textarea/textarea~hidden-label.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"id": "textarea08",
3+
"value": "Input",
4+
"labelHidden": "true"
5+
}

‎source/_patterns/01-elements/textarea/textarea~hidden-label.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Textarea - Hidden label
3+
state: complete
4+
order: 8
5+
---
6+
7+
## Possibility to hide the label
8+
9+
> A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.
10+
11+
source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
12+
13+
You could set the attribute `data-label-hidden="true"` for the rare case that you would want to visually hide the textual label for a textarea element.

0 commit comments

Comments
 (0)