fix: data-variant overwrites (in)valid border colors (#422)

* chore: simplified this attribute

* fix: overwriting form stylings for errors

* feat: added new programmatic invalid example

* refactor: added the correct styling for invalid selects

* Update select.scss

* refactor: generalizing the form validations

* fix: corrected this previously necessary declaration

* Revert "fix: corrected this previously necessary declaration"

This reverts commit 25e3473.

* refactor: we need to differentiate in between the different form elements

* refactor: enabled floating labels again

* chore: make this more generic

* chore: make this more generic

* refactor: this obviously was only related to floating labels and not form validation

* refactor: modern floating label for selects

w/o necessary required on the select, yeah !

* refactor: reunited the form validation SCSS placeholder

we've found another way to support floating labels on selects w/o having them as a required element

* Revert "refactor: reunited the form validation SCSS placeholder"

This reverts commit 48a1acb.

* style: further optimizations

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

@@ -33,6 +33,38 @@
 	}
 }
 
+// Validation
+// We need to differentiate here for select elements, that we couldn't handle by :placeholder-shown
+// TODO: maybe we could totally restructure this, work with a :not(select) instead, differentiate in between user-invalid and provide a fallback (https://github.com/db-ui/mono/pull/893), etc.
+%form-element-validation {
+	// listing the relevant form attributes related to form validation
+	&:is(:required, [pattern], [min], [max], [step], [minlength], [maxlength]) {
+		&,
+		// workaround for the DB UI Core selectors
+		&[data-variant] {
+			&:not([aria-invalid]) {
+				&:not(:placeholder-shown) {
+					&:valid {
+						--formElement---borderColor: #{$db-color-green-600};
+					}
+
+					&:invalid {
+						--formElement---borderColor: #{$db-color-red-500};
+					}
+				}
+			}
+		}
+	}
+}
+%form-element-validation-programmatic {
+	&[aria-invalid="true"] {
+		&,
+		&[data-variant] {
+			--formElement---borderColor: #{$db-color-red-500};
+		}
+	}
+}
+
 // ### Style variations
 // Semitransparent
 %form-element-semitransparent {

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

@@ -7,7 +7,7 @@
 	{{#if disabled}} disabled{{/if }}
 	value="{{ value }}"
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
-	{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }}
+	{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}
 	{{{ validation }}}
 	{{#if datalist }} list="datalist{{ id }}"{{/if }}
 	aria-labelledby="{{ id }}-label"

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

@@ -107,23 +107,10 @@
 			color: $db-color-cool-gray-500;
 		}
 
-		// TODO: Evaluate whether those could get moved to ../_form-elements.scss
-		// Validation
-		&:required {
-			&:valid:not([aria-invalid]) {
-				--formElement---borderColor: #{$db-color-green-600};
-			}
-
-			&:invalid {
-				&:not(:placeholder-shown) {
-					--formElement---borderColor: #{$db-color-red-500};
-				}
-			}
-		}
-
-		&[aria-invalid="true"] {
-			--formElement---borderColor: #{$db-color-red-500};
-		}
+		/* stylelint-disable order/order */
+		@extend %form-element-validation;
+		@extend %form-element-validation-programmatic;
+		/* stylelint-enable order/order */
 
 		// ### Style variations
 		&[data-variant="semitransparent"] {

source/_patterns/01-elements/input/input~invalid-attribute.json

@@ -4,5 +4,5 @@
 	"describedbyid": "input15hint",
 	"value": "Inpu",
 	"validation": " minlength=\"5\"",
-	"aria-invalid": "true"
+	"invalid": "true"
 }

source/_patterns/01-elements/select/_select.hbs → source/_patterns/01-elements/select/select.hbs

@@ -2,8 +2,8 @@
 	{{#if id }} name="{{ id }}" id="{{ id }}"{{/if }}
 	{{#if disabled}} disabled{{/if }}
 	{{#if multiple}} multiple{{/if }}
-	{{#unless multiple}} required{{/unless}}
-	{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}" {{/if }}
+	{{#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 }}
 		<option value="smartphone">Smartphone</option>

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

@@ -39,14 +39,30 @@
 			}
 		}
 
-		&:required:invalid,
-		&[aria-invalid="true"] {
+		&:has(option:checked:empty) {
 			& + .elm-label {
 				color: $select-floatingLabel--color;
 				font-size: to-rem($pxValue: 16);
 				transform: translate($db-spacing-m, -#{to-rem($pxValue: 35)});
 			}
 		}
+
+		// Validation
+		/* stylelint-disable order/order */
+		@extend %form-element-validation-programmatic;
+		/* stylelint-enable order/order */
+		&,
+		&[data-variant]  {
+			&:not([aria-invalid]) {
+				&:is(:user-valid) {
+					--formElement---borderColor: #{$db-color-green-600};
+				}
+
+				&:is(:user-invalid) {
+					--formElement---borderColor: #{$db-color-red-500};
+				}
+			}
+		}
 	}
 
 	// TODO: Evaluate whether those could get moved to ../_form-elements.scss

source/_patterns/01-elements/select/select~invalid-attribute.json

@@ -0,0 +1,5 @@
+{
+	"id": "select13",
+	"label": "Devices",
+	"invalid": "true"
+}

source/_patterns/01-elements/select/select~invalid-attribute.md

@@ -0,0 +1,11 @@
+---
+title: Select - Invalid state by HTML attribute
+state: complete
+order: 7
+---
+
+## Form validation
+
+Please have a look especially at the section for form validation within the overall [components/forms](../components-form/index.html) page.
+
+Additionally to the browser built-in pseudo-selector `:invalid` we're providing styling for the [`aria-invalid="true"` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) as well.

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

@@ -7,7 +7,7 @@
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
 	{{{ validation }}}
 	{{#if maxlength }} maxlength="{{ maxlength }}"
-	{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }}
+	{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}
 	oninput="result_{{ id }}.value=this.value.length+'/'+this.attributes.maxlength.value"{{/if }}
 	{{#if variant}} data-variant="{{variant}}"{{/if }}>{{ value }}</textarea>
 {{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}"></output>{{/if }}

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

@@ -56,28 +56,10 @@
 		}
 	}
 
-	// TODO: Evaluate whether those could get moved to ../_form-elements.scss
-	// Validation
-	&:required,
-	&:focus {
-		&:valid:not([aria-invalid]) {
-			--formElement---borderColor: #{$db-color-green-600};
-		}
-
-		&:invalid {
-			&:not(:placeholder-shown) {
-				--formElement---borderColor: #{$db-color-red-500};
-
-				& ~ .description {
-					color: $db-color-red-500;
-				}
-			}
-		}
-	}
-
-	&[aria-invalid="true"] {
-		--formElement---borderColor: #{$db-color-red-500};
-	}
+	/* stylelint-disable order/order */
+	@extend %form-element-validation;
+	@extend %form-element-validation-programmatic;
+	/* stylelint-enable order/order */
 
 	// TODO: Evaluate whether those could get moved to ../_form-elements.scss
 	& + output {

source/_patterns/01-elements/textarea/textarea~invalid-attribute.json

@@ -2,5 +2,5 @@
 	"id": "textarea06",
 	"value": "Inpu",
 	"validation": " minlength=\"5\"",
-	"aria-invalid": "true"
+	"invalid": "true"
 }