fix: issue for input calendar focus (#4202)

Author: nmerget

__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -117,19 +117,18 @@
   - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: Label
   - textbox "Label"
   - status
-  - text: clock" / " Label
+  - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / "
   - link "Example Floating Label arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
@@ -165,19 +164,19 @@
   - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: Label
   - textbox "Label"
   - status
-  - text: clock" / " Label
+  - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: Label
   - combobox "Label"
   - status
   - text: chevron_down" / " Label

__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -118,19 +118,19 @@
   - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: clock" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / "
+  - text: "\" / \""
   - link "Example Floating Label arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
@@ -166,19 +166,19 @@
   - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: clock" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - combobox "Label"
   - status
   - text: chevron_down" / " Label

__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -118,19 +118,19 @@
   - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: clock" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / "
+  - text: "\" / \""
   - link "Example Floating Label arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
@@ -166,19 +166,19 @@
   - text: Label
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: clock" / " Label
+  - text: "\" / \" Label"
   - textbox "Label"
   - status
-  - text: calendar" / " Label
+  - text: "\" / \" Label"
   - combobox "Label"
   - status
   - text: chevron_down" / " Label

__snapshots__/input/showcase/firefox/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml

@@ -67,15 +67,19 @@ $icon-padding: calc(
 		}
 	}
 
-	&:has(input[type="date"]),
-	&:has(input[type="week"]),
-	&:has(input[type="datetime-local"]),
-	&:has(input[type="month"]) {
-		@include icons.set-icon("calendar", "after");
-	}
+	// This @supports should exclude Mozilla Firefox
+	// TODO: Reevaluate after Mozilla is supporting week and month input types
+	@supports selector(::-webkit-calendar-picker-indicator) {
+		&:has(input[type="date"]),
+		&:has(input[type="week"]),
+		&:has(input[type="datetime-local"]),
+		&:has(input[type="month"]) {
+			@include icons.set-icon("calendar", "after");
+		}
 
-	&:has(input[type="time"]) {
-		@include icons.set-icon("clock", "after");
+		&:has(input[type="time"]) {
+			@include icons.set-icon("clock", "after");
+		}
 	}
 
 	&:has(input[type="file"]) {
@@ -105,16 +109,35 @@ $icon-padding: calc(
 		}
 	}
 
+	&[data-variant="floating"] {
+		input {
+			&::-webkit-calendar-picker-indicator,
+			&::-webkit-search-cancel-button {
+				/* stylelint-disable-next-line db-ux/use-spacings */
+				margin-block-end: var(--db-base-body-icon-font-size-2xs);
+			}
+		}
+	}
+
 	input {
 		position: relative;
 
 		&::-webkit-calendar-picker-indicator,
 		&::-webkit-search-cancel-button {
+			@extend %db-overwrite-font-size-sm;
+
 			background-image: none;
 			inline-size: icons.$default-icon-font-size;
 			block-size: icons.$default-icon-font-size;
 			padding: 0;
 			cursor: pointer;
+			/* stylelint-disable-next-line db-ux/use-spacings */
+			margin-block-start: variables.$db-border-width-3xs;
+			border-radius: variables.$db-border-radius-xs;
+
+			&:focus-visible {
+				@include helpers.get-focus-placeholder;
+			}
 		}
 
 		&::-webkit-search-cancel-button {

__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -1,25 +1,29 @@
 @use "../variables";
 @use "../colors";
 
+@mixin get-focus-placeholder {
+	outline: #{variables.$db-border-width-2xs} solid
+		var(
+			--db-focus-outline-color,
+			#{colors.$db-informational-on-bg-basic-emphasis-70-default}
+		);
+	outline-offset: variables.$db-border-width-xs;
+	box-shadow: 0 0 0 #{variables.$db-border-width-xs}
+		var(--db-focus-box-shadow-bg-color, transparent);
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition:
+			outline #{variables.$db-transition-duration-extra-fast},
+			box-shadow #{variables.$db-transition-duration-extra-fast};
+	}
+}
+
 %focus-placeholder {
 	&:not([data-disable-focus="true"]) {
-		outline: #{variables.$db-border-width-2xs} solid
-			var(
-				--db-focus-outline-color,
-				#{colors.$db-informational-on-bg-basic-emphasis-70-default}
-			);
-		outline-offset: variables.$db-border-width-xs;
-		box-shadow: 0 0 0 #{variables.$db-border-width-xs}
-			var(--db-focus-box-shadow-bg-color, transparent);
+		@include get-focus-placeholder;
 
 		&:not([type="radio"], [role="switch"]) {
 			border-radius: variables.$db-border-radius-xs;
 		}
-
-		@media screen and (prefers-reduced-motion: no-preference) {
-			transition:
-				outline #{variables.$db-transition-duration-extra-fast},
-				box-shadow #{variables.$db-transition-duration-extra-fast};
-		}
 	}
 }