fix(ui5-slider): focus outline fully visible (#2971)

The focus outline was not fully visible among different browsers and mobile devices.
SAP · Mar 19, 2021 · cb849ba · cb849ba
1 parent 553111f
commit cb849ba
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css
@@ -47,13 +47,17 @@
 	background: var(--_ui5_slider_progress_background);
 	border-radius: var(--_ui5_slider_progress_border_radius);
 	height: var(--_ui5_slider_inner_height);
-	will-change: transform;
 	position: relative;
+	outline: none;
 }
 
-.ui5-slider-progress:focus {
-	outline: var(--_ui5_slider_progress_outline);
-	outline-offset: var(--_ui5_slider_progress_outline_offset);
+.ui5-slider-progress:focus::after {
+	content: '';
+	position: absolute;
+	width: 100%;
+	border: var(--_ui5_slider_progress_outline);
+	top: var(--_ui5_slider_progress_outline_offset);
+	height: var(--_ui5_slider_outer_height);
 }
 
 .ui5-slider-tickmarks {

diff --git a/packages/main/src/themes/base/SliderBase-parameters.css b/packages/main/src/themes/base/SliderBase-parameters.css
@@ -3,6 +3,7 @@
 	--_ui5_slider_progress_container_background: var(--sapField_BorderColor);
 	--_ui5_slider_progress_border: none;
 	--_ui5_slider_inner_height: 0.25rem;
+	--_ui5_slider_outer_height: 1.6875rem;
 	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapActiveColor);
 	--_ui5_slider_handle_height: 1.625rem;
@@ -18,7 +19,7 @@
 	--_ui5_slider_handle_outline_offset: 0.075rem;
 	--_ui5_range_slider_handle_hover_background: rgba(var(--sapButton_Background), 0.25);
 	--_ui5_slider_progress_outline: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_slider_progress_outline_offset: 0.525rem;
+	--_ui5_slider_progress_outline_offset: -0.8125rem;
 	--_ui5_slider_tickmark_color: #89919a;
 	--_ui5_slider_tickmark_top: -0.375rem;
 	--_ui5_slider_disabled_opacity: 0.4;

diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -232,6 +232,8 @@
 	--_ui5_slider_tooltip_height: 1rem;
 	--_ui5_slider_tooltip_padding: 0.25rem;
 	--_ui5_slider_tooltip_bottom: 1.825rem;
+	--_ui5_slider_progress_outline_offset: -0.625rem;
+	--_ui5_slider_outer_height: 1.3125rem;
 
 	/* Table */
 	--_ui5_load_more_text_height: 2.625rem;