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

Author: mfranzke

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 {

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;

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;
 	}
 }

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;

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

@@ -0,0 +1,4 @@
+{
+	"id": "checkbox05",
+	"labelHidden": true
+}

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.

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;

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 }}

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);

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

@@ -0,0 +1,4 @@
+{
+	"id": "input20",
+	"labelHidden": "true"
+}