fix(ui5-range-slider): mobile focus support

packages/main/src/RangeSlider.ts

@@ -1,3 +1,4 @@
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -774,16 +775,16 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		const affectedValue = this._valueAffected;
 
 		if (this._isPressInCurrentRange || !affectedValue) {
-			this._progressBar?.focus();
+			this._progressBar?.focus({ focusVisible: isDesktop() } as FocusOptions);
 		}
 
 		if ((affectedValue === "startValue" && !isReversed) || (affectedValue === "endValue" && isReversed)) {
-			this._startHandle?.focus();
+			this._startHandle?.focus({ focusVisible: isDesktop() } as FocusOptions);
 			this.bringToFrontTooltip("start");
 		}
 
 		if ((affectedValue === "endValue" && !isReversed) || (affectedValue === "startValue" && isReversed)) {
-			this._endHandle?.focus();
+			this._endHandle?.focus({ focusVisible: isDesktop() } as FocusOptions);
 			this.bringToFrontTooltip("end");
 		}
 	}

packages/main/src/RangeSliderTemplate.tsx

@@ -20,6 +20,7 @@ const startHandle = (slider: RangeSlider) => {
 				max={slider.max}
 				tabIndex={slider._tabIndex}
 				active={slider.rangePressed}
+				desktop={slider._isDesktop}
 				handleType={SliderHandleType.Start}
 				aria-orientation="horizontal"
 				part="handle"
@@ -55,6 +56,7 @@ const endHandle = (slider: RangeSlider) => {
 				max={slider.max}
 				tabIndex={slider._tabIndex}
 				active={slider.rangePressed}
+				desktop={slider._isDesktop}
 				handleType={SliderHandleType.End}
 				aria-orientation="horizontal"
 				part="handle"
@@ -147,6 +149,7 @@ export default function RangeSliderTemplate(this: RangeSlider) {
 					progressAriaDisabled={this._ariaDisabled}
 					progressPressed={this.rangePressed}
 					progressFocused={this._progressFocused}
+					desktop={this._isDesktop}
 					onFocusIn={this._onfocusin}
 					onFocusOut={this._onfocusout}
 					part="scale"

packages/main/src/Slider.ts

@@ -1,4 +1,5 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -352,6 +353,10 @@ class Slider extends SliderBase implements IFormInputElement {
 		return this.getDomRef()?.querySelector<SliderTooltip>("[ui5-slider-tooltip]");
 	}
 
+	focusInnerElement() {
+		this._sliderHandle.focus({ focusVisible: isDesktop() } as FocusOptions);
+	}
+
 	get _sliderHandle() : HTMLElement {
 		return this.shadowRoot!.querySelector("[ui5-slider-handle]")!;
 	}

packages/main/src/SliderBase.ts

@@ -3,7 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isPhone, supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop, isPhone, supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
 	isEscape, isHome, isEnd, isUp, isDown, isRight, isLeft, isUpCtrl, isDownCtrl, isRightCtrl, isLeftCtrl, isPlus, isMinus, isPageUp, isPageDown, isF2,
@@ -296,6 +296,9 @@ abstract class SliderBase extends UI5Element {
 	}
 
 	onEnterDOM() {
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
 		ResizeHandler.register(this, this._resizeHandler);
 	}
 
@@ -800,6 +803,10 @@ abstract class SliderBase extends UI5Element {
 		return this.disabled ? -1 : 0;
 	}
 
+	get _isDesktop() {
+		return isDesktop();
+	}
+
 	get _ariaDescribedByHandleText() {
 		return this.editableTooltip ? "ui5-slider-InputDesc" : undefined;
 	}

packages/main/src/SliderHandle.ts

@@ -81,6 +81,12 @@ class SliderHandle extends UI5Element {
 	@property({ type: Boolean })
 	active = false;
 
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	desktop = false;
+
 	/**
 	 * Defines whether the slider handle should appear hovered.
 	 * <br><br>

packages/main/src/SliderScale.ts

@@ -171,6 +171,12 @@ class SliderScale extends UI5Element {
 	@property({ type: Boolean })
 	progressFocused = false;
 
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	desktop = false;
+
 	/**
 	 * Indicates that the progress bar is being hovered.
 	 * @default false
@@ -288,6 +294,9 @@ class SliderScale extends UI5Element {
 	}
 
 	_onProgressMouseEnter() {
+		if (!this.desktop) {
+			return;
+		}
 		this.progressHovered = true;
 		this.handles.forEach(handle => {
 			if (!handle.active) {
@@ -297,6 +306,9 @@ class SliderScale extends UI5Element {
 	}
 
 	_onProgressMouseLeave() {
+		if (!this.desktop) {
+			return;
+		}
 		this.progressHovered = false;
 		this.handles.forEach(handle => {
 			handle.hovered = false;

packages/main/src/SliderScaleTemplate.tsx

@@ -29,7 +29,7 @@ export default function SliderScaleTemplate(this: SliderScale) {
 				class={{
 					"ui5-slider-scale-progress": true,
 					"ui5-slider-progress": true,
-					"ui5-slider-progress--focused": this.progressFocused || this.progressPressed,
+					"ui5-slider-progress--focused": this.desktop && (this.progressFocused || this.progressPressed),
 				}}
 				part="progress"
 				style={this._progressStyle}

packages/main/src/SliderTemplate.tsx

@@ -20,6 +20,7 @@ const handle = (slider: Slider) => {
 				min={slider.min}
 				max={slider.max}
 				tabIndex={slider.disabled ? -1 : 0}
+				desktop={slider._isDesktop}
 				aria-orientation="horizontal"
 				part="handle"
 				exportparts="icon: handle-icon"

packages/main/src/themes/SliderHandle.css

@@ -18,13 +18,14 @@
 	transform: translateY(-50%);
 }
 
-:host(:focus) {
+:host([desktop]:focus),
+:host(:focus-visible) {
 	outline: var(--ui5_slider_handle_outline);
 	outline-offset: var(--ui5_slider_handle_outline_offset);
 	z-index: 6;
 }
 
-:host(:hover),
+:host([desktop]:hover),
 :host([hovered]) {
 	background: var(--_ui5_slider_handle_hover_background);
 	border: var(--_ui5_slider_handle_hover_border);
@@ -46,17 +47,21 @@
 	height: var(--_ui5_slider_handle_icon_size);
 }
 
-:host(:focus),
+:host([desktop]:focus),
+:host(:focus-visible),
 :host([active]),
 :host(:active) {
-	[slider-icon] {
-		display: none;
-	}
-
 	background-color: var(--_ui5_slider_handle_background_focus);
 	border: var(--_ui5_slider_handle_focus_border);
 }
 
+:host([desktop]:focus) [slider-icon],
+:host(:focus-visible) [slider-icon],
+:host([active]) [slider-icon],
+:host(:active) [slider-icon] {
+	display: none;
+}
+
 :host([orientation="Vertical"]) {
 	transform: rotate(90deg);
 }

packages/main/src/themes/SliderScale.css

@@ -76,7 +76,8 @@
 	outline: none;
 }
 
-.ui5-slider-scale-progress:focus::after,
+:host([desktop]) .ui5-slider-scale-progress:focus::after,
+.ui5-slider-scale-progress:focus-visible::after,
 .ui5-slider-scale-progress.ui5-slider-progress--focused::after {
 	border: var(--_ui5_range_slider_progress_focus_border);
 	border-radius: var(--_ui5_range_slider_progress_focus_border_radius, 0.5rem);
@@ -91,7 +92,8 @@
 	box-sizing: border-box;
 }
 
-.ui5-slider-scale-progress:focus::before,
+:host([desktop]) .ui5-slider-scale-progress:focus::before,
+.ui5-slider-scale-progress:focus-visible::before,
 .ui5-slider-scale-progress.ui5-slider-progress--focused::before {
 	display: var(--_ui5_range_slider_legacy_progress_focus_display);
 	content: '';