feat(ui5-color-palette*): add mobile focus for external input devices (…

…SAP#9770) ColorPaletteItem elements can now receive focus when using keyboards on mobile devices. Focus outline is now displayed via CSS pseudo-classes. On mobile the default case still stands, where there isn't focus when selecting a color.
plamenivanov91 · Oct 5, 2024 · 4c481e6 · 4c481e6
1 parent e3db6a6
commit 4c481e6
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 1 deletion.
diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts
@@ -5,6 +5,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
 import type { IColorPaletteItem } from "./ColorPalette.js";
 import ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js";
 import {
@@ -31,6 +32,7 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
 	renderer: litRender,
 	styles: ColorPaletteItemCss,
 	template: ColorPaletteItemTemplate,
+	shadowRootOptions: { delegatesFocus: true },
 })
 class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
 	/**
@@ -95,6 +97,10 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
 		this._disabled = !this.value;
 		this.onPhone = isPhone();
 		this.setAttribute("style", `background-color: ${this.value}`);
+
+		// since height is dynamically determined by padding-block-start
+		const itemHeight = this.offsetHeight + 4; // adding 4px for the offsets on top and bottom
+		this.style.setProperty(getScopedVarName("--_ui5_color_palette_item_height"), `${itemHeight}px`);
 	}
 
 	get colorLabel() {

diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts
@@ -7,6 +7,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
 import ColorPalettePopoverTemplate from "./generated/templates/ColorPalettePopoverTemplate.lit.js";
 
 // Styles
@@ -182,6 +183,12 @@ class ColorPalettePopover extends UI5Element {
 		} else if (colorPalette.showDefaultColor) {
 			colorPalette.colorPaletteNavigationElements[0].focus();
 		}
+
+		// since height is dynamically determined by padding-block-start
+		colorPalette.allColorsInPalette.forEach((item: IColorPaletteItem) => {
+			const itemHeight = item.offsetHeight + 4; // adding 4px for the offsets on top and bottom
+			item.style.setProperty(getScopedVarName("--_ui5_color_palette_item_height"), `${itemHeight}px`);
+		});
 	}
 
 	onSelectedColor(e: CustomEvent<ColorPaletteItemClickEventDetail>) {

diff --git a/packages/main/src/themes/ColorPaletteItem.css b/packages/main/src/themes/ColorPaletteItem.css
@@ -112,7 +112,7 @@
 
 :host([selected]:not([_disabled]):not([on-phone]):not(:focus):not(:hover)) .ui5-cp-item::after,
 :host([selected]:not([_disabled]):not([on-phone]):not(:focus):hover) .ui5-cp-item::after,
-:host(:not([selected]):hover) .ui5-cp-item::after {
+:host(:not([selected]):not([on-phone]):hover) .ui5-cp-item::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
@@ -135,4 +135,26 @@
 	border: var(--_ui5_color-palette-item-before-focus-color);
 	border-radius: var(--_ui5_color-palette-item-before-focus-border-radius);
 	pointer-events: none;
+}
+
+/* Focus on mobile ONLY with external keyboard/mouse */
+:host(:not([disabled])) .ui5-cp-item:focus-visible::before,
+:host(:not([disabled])) .ui5-cp-item:focus-visible::after {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	pointer-events: none;
+}
+
+:host(:not([disabled])) .ui5-cp-item:focus-visible::before {
+	inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset))
+			var(--_ui5_color-palette-item-mobile-focus-sides-inset);
+	border: var(--_ui5_color-palette-item-before-focus-color);
+	border-radius: var(--_ui5_color-palette-item-after-focus-border-radius);
+}
+
+:host(:not([disabled])) .ui5-cp-item:focus-visible::after {
+	inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset))
+			var(--_ui5_color-palette-item-mobile-focus-sides-inset);
+	border: var(--_ui5_color-palette-item-after-mobile-focus-border);
 }
diff --git a/packages/main/src/themes/base/ColorPalette-parameters.css b/packages/main/src/themes/base/ColorPalette-parameters.css
@@ -24,4 +24,7 @@
 	--_ui5_color-palette-item-after-focus-not-selected-border: 0.0625rem dotted black;
 	--_ui5_color-palette-item-after-not-focus-color: 0.0625rem solid var(--sapGroup_ContentBackground);
 	--_ui5_color-palette-item-selected-focused-border: 0.0625rem solid var(--sapGroup_ContentBackground);
+	--_ui5-color-palette-item-mobile-focus-inset: 0.625rem;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: 0.25rem 0.25rem;
+	--_ui5_color-palette-item-after-mobile-focus-border: var(--_ui5_color-palette-item-after-focus-color);
 }
diff --git a/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css
@@ -21,4 +21,7 @@
 	--_ui5_color-palette-item-selected-focused-border-before: -0.0625rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css
@@ -21,4 +21,7 @@
 	--_ui5_color-palette-item-selected-focused-border-before: -0.0625rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css
@@ -19,4 +19,7 @@
 	--_ui5_color-palette-item-hover-inner-border-radius: 0.375rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_exp/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon_exp/ColorPalette-parameters.css
@@ -19,4 +19,7 @@
 	--_ui5_color-palette-item-hover-inner-border-radius: 0.375rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
 }