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
db-ui · Dec 15, 2023 · 520feee · 520feee
1 parent e36ea82
commit 520feee
Show file tree

Hide file tree

Showing 24 changed files with 131 additions and 12 deletions.
diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss
@@ -33,6 +33,12 @@
 	}
 }
 
+%form-label {
+	&[data-label-hidden="true"] {
+		@include a11y-visually-hidden($partial: $partial);
+	}
+}
+
 // ### Style variations
 // Semitransparent
 %form-element-semitransparent {

diff --git a/source/_patterns/01-elements/checkbox/checkbox.hbs b/source/_patterns/01-elements/checkbox/checkbox.hbs
@@ -5,7 +5,7 @@
 	value="{{ value }}"
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
 	{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}>
-<label class="elm-label" for="{{ id }}">{{ label }}</label>
+<label class="elm-label" for="{{ id }}"{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
 {{#if indeterminate}}
 <script>
 	document.querySelector('#{{ id }}').indeterminate = true;

diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -2,6 +2,7 @@
 
 @import "../../../css/partials.meta";
 @import "checkbox.variables";
+@import "../form-elements";
 
 .elm-checkbox {
 	@include icon("\00A0", 24, "outline", $partial: $partial);
@@ -64,6 +65,8 @@
 	}
 
 	& + label {
+		@extend %form-label;
+
 		margin-left: $db-spacing-xs;
 	}
 }
diff --git a/source/_patterns/01-elements/checkbox/checkbox~indeterminate.md b/source/_patterns/01-elements/checkbox/checkbox~indeterminate.md
@@ -4,7 +4,7 @@ title: Checkbox - indeterminate
 
 ## State: indeterminate
 
-Please keep in mind, that the special state of an indeterminate element is necessary to get set programatically with JavaScript:
+Please keep in mind, that the special state of an indeterminate element is necessary to get set programmatically with JavaScript:
 
 ```js
 inputInstance.indeterminate = true;

diff --git a/source/_patterns/01-elements/checkbox/checkbox~label-hidden.json b/source/_patterns/01-elements/checkbox/checkbox~label-hidden.json
@@ -0,0 +1,4 @@
+{
+	"id": "checkbox05",
+	"labelHidden": true
+}
diff --git a/source/_patterns/01-elements/checkbox/checkbox~label-hidden.md b/source/_patterns/01-elements/checkbox/checkbox~label-hidden.md
@@ -0,0 +1,11 @@
+---
+title: Checkbox - Hidden label
+---
+
+## Possibility to hide the label
+
+> 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.
+
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+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.
diff --git a/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.md b/source/_patterns/01-elements/checkbox/checkbox~on-dark-background-indeterminate.md
@@ -4,7 +4,7 @@ title: Checkbox - indeterminate on dark background
 
 ## State: indeterminate
 
-Please keep in mind, that the special state of an indeterminate element is necessary to get set programatically with JavaScript:
+Please keep in mind, that the special state of an indeterminate element is necessary to get set programmatically with JavaScript:
 
 ```js
 inputInstance.indeterminate = true;

diff --git a/source/_patterns/01-elements/input/input.hbs b/source/_patterns/01-elements/input/input.hbs
@@ -15,7 +15,8 @@
 <label class="elm-label"
 	for="{{ id }}"
 	aria-hidden="true"
-	id="{{ id }}-label">{{ label }}</label>
+	id="{{ id }}-label"
+	{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
 {{#if description }}<p{{#if describedbyid }} id="{{ describedbyid }}"{{/if }} class="description">{{{ description }}}</p>{{/if }}
 {{#if datalist }}<datalist id="datalist{{ id }}">
 	{{#each datalistItems }}

diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss
@@ -1,5 +1,6 @@
 @charset "utf-8";
 
+@import "../../../css/partials.meta";
 @import "input.variables";
 @import "../form-elements";
 
@@ -13,10 +14,14 @@
 	line-height: to-rem($pxValue: 24);
 	max-width: 100%;
 
-	padding: $db-spacing-s $db-spacing-m;
-
 	width: 100%;
 
+	padding-inline: $db-spacing-m;
+	// No need to reposition the included value on hidden label
+	&:not(:has(+ label[data-label-hidden="true"])) {
+		padding-block: $db-spacing-s;
+	}
+
 	&[list] {
 		&::-webkit-calendar-picker-indicator {
 			margin-right: -1rem;
@@ -25,7 +30,10 @@
 
 	&:not(:placeholder-shown) {
 		padding-bottom: 0;
-		padding-top: to-rem($pxValue: 16);
+		// No need to reposition the included value on hidden label
+		&:not(:has(+ label[data-label-hidden="true"])) {
+			padding-top: to-rem($pxValue: 16);
+		}
 	}
 
 	// * TODO: to get evaluated
@@ -89,6 +97,8 @@
 		}
 
 		& + .elm-label {
+			@extend %form-label;
+
 			color: $db-color-cool-gray-500;
 			display: block;
 			font-size: to-rem($pxValue: 12);

diff --git a/source/_patterns/01-elements/input/input~hidden-label.json b/source/_patterns/01-elements/input/input~hidden-label.json
@@ -0,0 +1,4 @@
+{
+	"id": "input20",
+	"labelHidden": "true"
+}
diff --git a/source/_patterns/01-elements/input/input~hidden-label.md b/source/_patterns/01-elements/input/input~hidden-label.md
@@ -0,0 +1,13 @@
+---
+title: Input - Hidden label
+state: complete
+order: 11
+---
+
+## Possibility to hide the label
+
+> 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.
+
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+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.
diff --git a/source/_patterns/01-elements/radio/_radio.hbs b/source/_patterns/01-elements/radio/_radio.hbs
@@ -8,4 +8,4 @@
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
 	{{#if invalid}} aria-invalid="true"{{/if }}
 	{{#if required}} required{{/if}}>
-<label class="elm-label" for="{{ id }}">{{ label }}</label>
+<label class="elm-label" for="{{ id }}"{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss
@@ -1,6 +1,8 @@
 @charset "utf-8";
 
+@import "../../../css/partials.meta";
 @import "radio.variables";
+@import "../form-elements";
 
 .elm-radio {
 	appearance: none;
@@ -52,6 +54,8 @@
 	// }
 
 	& + label {
+		@extend %form-label;
+
 		margin-left: $db-spacing-xs;
 	}
 

diff --git a/source/_patterns/01-elements/radio/radios.hbs b/source/_patterns/01-elements/radio/radios.hbs
@@ -1,3 +1,3 @@
 {{#each radios }}
-	{{> elements-radio disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name }}<br>
+	{{> elements-radio disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name labelHidden=../labelHidden }}<br>
 {{/each }}
diff --git a/source/_patterns/01-elements/radio/radios~label-hidden.json b/source/_patterns/01-elements/radio/radios~label-hidden.json
@@ -0,0 +1,4 @@
+{
+	"name": "radioLabelHidden",
+	"labelHidden": true
+}
diff --git a/source/_patterns/01-elements/radio/radios~label-hidden.md b/source/_patterns/01-elements/radio/radios~label-hidden.md
@@ -0,0 +1,11 @@
+---
+title: Radio - Hidden label
+---
+
+## Possibility to hide the label
+
+> 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.
+
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+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.
diff --git a/source/_patterns/01-elements/select/select.hbs b/source/_patterns/01-elements/select/select.hbs
@@ -5,7 +5,7 @@
 	{{#if required}} required{{/if}}
 	{{#if invalid }} aria-invalid="{{ invalid }}" {{/if }}
 	{{#if variant}} data-variant="{{variant}}"{{/if }}>
-	{{#if optgroup}}<optgroup label="Devices">{{else}}{{#unless multiple}}<option></option>{{/unless}}{{/if }}
+	{{#if optgroup}}<optgroup label="Devices">{{else}}{{#unless multiple}}{{#unless labelHidden}}<option></option>{{/unless}}{{/unless}}{{/if }}
 		<option value="smartphone">Smartphone</option>
 		<option value="softphone">Softphone</option>
 		<option value="headset">Headset</option>
@@ -18,4 +18,4 @@
 		<option value="developer">Developer</option>
 	</optgroup>{{/if }}
 </select>
-<label class="elm-label" for="{{ id }}">{{ label }}</label>
+<label class="elm-label" for="{{ id }}"{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
diff --git a/source/_patterns/01-elements/select/select.scss b/source/_patterns/01-elements/select/select.scss
@@ -1,3 +1,4 @@
+@import "../../../css/partials.meta";
 @import "select.variables";
 @import "../form-elements";
 @import "../../../css/db-ui-core.variables";
@@ -27,6 +28,10 @@
 		background-repeat: no-repeat;
 		height: to-rem($pxValue: 44);
 		padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0 $db-spacing-m;
+		// No need to reposition the included value on hidden label
+		&:has(+ label[data-label-hidden="true"]) {
+			padding-top: 0;
+		}
 
 		// Floating labels
 		& + .elm-label {
@@ -96,6 +101,8 @@
 
 	// Floating labels
 	& + .elm-label {
+		@extend %form-label;
+
 		display: block;
 		font-size: to-rem($pxValue: 12);
 		margin-bottom: -#{to-rem($pxValue: 18)};

diff --git a/source/_patterns/01-elements/select/select~hidden-label.json b/source/_patterns/01-elements/select/select~hidden-label.json
@@ -0,0 +1,5 @@
+{
+	"id": "select14",
+	"label": "Devices",
+	"labelHidden": "true"
+}
diff --git a/source/_patterns/01-elements/select/select~hidden-label.md b/source/_patterns/01-elements/select/select~hidden-label.md
@@ -0,0 +1,13 @@
+---
+title: Select - Hidden label
+state: complete
+order: 8
+---
+
+## Possibility to hide the label
+
+> 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.
+
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+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.
diff --git a/source/_patterns/01-elements/textarea/textarea.hbs b/source/_patterns/01-elements/textarea/textarea.hbs
@@ -1,5 +1,5 @@
 {{! TODO: the retrieval of the standard values doesn't work so far }}
-<label class="elm-label" for="{{ id }}">{{ label }}</label>
+<label class="elm-label" for="{{ id }}"{{#if labelHidden }} data-label-hidden="true"{{/if }}>{{ label }}</label>
 <textarea class="elm-textarea {{ styleModifier }}"
 	placeholder="{{ placeholder }}"
 	id="{{ id }}"

diff --git a/source/_patterns/01-elements/textarea/textarea.scss b/source/_patterns/01-elements/textarea/textarea.scss
@@ -1,5 +1,6 @@
 @charset "utf-8";
 
+@import "../../../css/partials.meta";
 @import "textarea.variables";
 @import "../form-elements";
 
@@ -29,6 +30,10 @@
 	// align-items: center;
 	// justify-content: flex-start;
 
+	.elm-label:has(+ &) {
+		@extend %form-label;
+	}
+
 	&:not([rows]) {
 		max-height: to-rem($pxValue: 600);
 		min-height: to-rem($pxValue: 120);

diff --git a/source/_patterns/01-elements/textarea/textarea~hidden-label.json b/source/_patterns/01-elements/textarea/textarea~hidden-label.json
@@ -0,0 +1,5 @@
+{
+	"id": "textarea08",
+	"value": "Input",
+	"labelHidden": "true"
+}
diff --git a/source/_patterns/01-elements/textarea/textarea~hidden-label.md b/source/_patterns/01-elements/textarea/textarea~hidden-label.md
@@ -0,0 +1,13 @@
+---
+title: Textarea - Hidden label
+state: complete
+order: 8
+---
+
+## Possibility to hide the label
+
+> 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.
+
+source: <https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text>
+
+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.