chore(ui5-product-switch-item): update focus handling (#8819)

Adjusted `ui5-product-switch-item` focus display rules. On desktop,
focus outline is always visible. For mobile, focus outline only appears
with an external keyboard, it remains hidden for touch focus.

Related to: #8320

packages/fiori/src/ProductSwitchItem.ts

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
@@ -122,13 +123,6 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem {
 	@property({ type: Boolean })
 	private active!: boolean;
 
-	/**
-	 * Indicates whether the element is focused.
-	 * @private
-	 */
-	@property({ type: Boolean })
-	private focused!: boolean;
-
 	/**
 	 * Used to set the selected state of the component. Only one selected in a sequence.
 	 * **Note:** Set by the `ProductSwitch`
@@ -146,6 +140,10 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem {
 
 	onEnterDOM() {
 		document.addEventListener("mouseup", this._deactivate);
+
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
 	}
 
 	onExitDOM() {
@@ -185,12 +183,9 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem {
 
 	_onfocusout() {
 		this.active = false;
-		this.focused = false;
 	}
 
 	_onfocusin(e: FocusEvent) {
-		this.focused = true;
-
 		this.fireEvent("_focused", e);
 	}
 

packages/fiori/src/themes/ProductSwitchItem.css

@@ -4,25 +4,24 @@
 	margin: .25rem;
 	border-radius: .25rem;
 	box-sizing: border-box;
-	background:var(--sapList_Background);
+	background: var(--sapList_Background);
 }
 
-:host([selected]) {
+:host([selected]) .ui5-product-switch-item-root {
 	background: var(--sapList_SelectionBackgroundColor);
 	border: 0.125rem solid var(--sapList_SelectionBorderColor);
 }
 
-:host(:hover) {
-	background:var(--sapList_Hover_Background);
+:host(:hover) .ui5-product-switch-item-root {
+	background :var(--sapList_Hover_Background);
 }
 
-:host([selected]:hover) {
+:host([selected]:hover) .ui5-product-switch-item-root {
 	background: var(--sapList_Hover_SelectionBackground);
 }
 
-
-:host([active]),
-:host([selected][active])  {
+:host([active]) .ui5-product-switch-item-root,
+:host([selected][active]) .ui5-product-switch-item-root {
 	background: var(--sapList_Active_Background);
 }
 
@@ -32,12 +31,14 @@
 	color:var(--sapList_Active_TextColor);
 }
 
-:host([focused]) {
+:host([desktop]) .ui5-product-switch-item-root:focus-within,
+.ui5-product-switch-item-root:focus-visible {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset:var(--_ui5_product_switch_item_outline_offset)
 }
 
-:host([active][focused]) {
+:host([desktop][active]) .ui5-product-switch-item-root:focus-within,
+:host([active]) .ui5-product-switch-item-root:focus-visible {
 	outline-color: var(--_ui5_product_switch_item_active_outline_color);
 }
 
@@ -155,24 +156,3 @@
 		padding-top: .75rem;
 	}
 }
-
-[ui5-product-switch-item][focused] {
-	outline: none;
-	position: relative;
-}
-
-[ui5-product-switch-item][focused] .ui5-product-switch-item-root::after {
-	content: "";
-	position: absolute;
-	border-color: var(--_ui5_product_switch_item_outline_color);
-	border-width: var(--_ui5_product_switch_item_outline_width);
-	border-style: dotted;
-	top: var(--_ui5_product_switch_item_outline_offset_positive);
-	bottom:  var(--_ui5_product_switch_item_outline_offset_positive);
-	left:  var(--_ui5_product_switch_item_outline_offset_positive);
-	right:  var(--_ui5_product_switch_item_outline_offset_positive);
-}
-
-[ui5-product-switch-item][active][focused] .ui5-product-switch-item-root::after {
-	border-color: var(--_ui5_product_switch_item_active_outline_color);
-}