feat(ui5-avatar): update focus handling (#8420)

kgogov · web-flow · commit c66ddd506c48 · 2024-03-19T12:03:11.000+02:00
* feat(ui5-avatar): update focus handling

Adjusted ui5-avatar 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.
diff --git a/packages/main/src/Avatar.hbs b/packages/main/src/Avatar.hbs
@@ -4,8 +4,6 @@
 	data-sap-focus-ref
 	@keyup={{_onkeyup}}
 	@keydown={{_onkeydown}}
-	@focusout={{_onfocusout}}
-	@focusin={{_onfocusin}}
 	@click={{_onclick}}
 	role="{{_role}}"
 	aria-haspopup="{{_ariaHasPopup}}"
@@ -22,7 +20,7 @@
 		{{#if initials}}
 			<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{{validInitials}}</span>
 			<ui5-icon
-				class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden" 
+				class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
 				name="{{fallbackIcon}}"
 			></ui5-icon>
 		{{/if}}
diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts
@@ -11,6 +11,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import type { IAvatarGroupItem } from "./AvatarGroup.js";
 // Template
 import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
@@ -91,13 +92,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 	@property({ type: Boolean })
 	interactive!: boolean;
 
-	/**
-	 * Indicates if the elements is on focus
-	 * @private
-	 */
-	@property({ type: Boolean })
-	focused!: boolean;
-
 	/**
 	 * Indicates if the elements is pressed
 	 * @private
@@ -341,6 +335,10 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 	}
 
 	onEnterDOM() {
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
+
 		this.initialsContainer && ResizeHandler.register(this.initialsContainer,
 			this._handleResizeBound);
 	}
@@ -409,16 +407,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 		this.pressed = !this.pressed;
 	}
 
-	_onfocusout() {
-		this.focused = false;
-	}
-
-	_onfocusin() {
-		if (this._interactive) {
-			this.focused = true;
-		}
-	}
-
 	_getAriaHasPopup() {
 		if (!this._interactive || this.ariaHaspopup === "") {
 			return;
diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css
@@ -30,7 +30,8 @@
 	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
 }
 
-:host(:is([interactive][focused]):not([hidden]):not([pressed])) {
+:host(:is([interactive][desktop]):not([hidden])) .ui5-avatar-root:focus-within,
+:host(:is([interactive]):not([hidden])) .ui5-avatar-root:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 }
@@ -55,6 +56,7 @@
 	outline: none;
 	height: 100%;
 	width: 100%;
+	border-radius: inherit;
 }
 
 /* Sizes */
diff --git a/packages/main/src/themes/base/Avatar-parameters.css b/packages/main/src/themes/base/Avatar-parameters.css
@@ -41,8 +41,8 @@
 	--ui5-avatar-placeholder-border-color: var(--sapField_BorderColor);
 
 	--_ui5_avatar_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_avatar_focus_offset: 1px;
-	--_ui5_avatar_focus_width: 1px;
+	--_ui5_avatar_focus_offset: 0.0625rem;
+	--_ui5_avatar_focus_width: 0.0625rem;
 	--_ui5_avatar_focus_color: var(--sapContent_FocusColor);
 
 	--_ui5_avatar_fontsize_XS: 0.75rem;
diff --git a/packages/main/src/themes/sap_belize_hcb/Avatar-parameters.css b/packages/main/src/themes/sap_belize_hcb/Avatar-parameters.css
@@ -16,4 +16,5 @@
 	--ui5-avatar-accent10: #000;
 	--ui5-avatar-placeholder: #000;
 	--_ui5_avatar_outline: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_avatar_focus_offset: 0.125rem;
 }
diff --git a/packages/main/src/themes/sap_belize_hcw/Avatar-parameters.css b/packages/main/src/themes/sap_belize_hcw/Avatar-parameters.css
@@ -16,4 +16,5 @@
 	--ui5-avatar-accent10: #fff;
 	--ui5-avatar-placeholder: #fff;
 	--_ui5_avatar_outline: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_avatar_focus_offset: 0.125rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Avatar-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Avatar-parameters.css
@@ -16,6 +16,7 @@
 	--ui5-avatar-accent10: var(--sapBackgroundColor);
 	--ui5-avatar-placeholder: var(--sapBackgroundColor);
 	--_ui5_avatar_outline: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_avatar_focus_offset: 0.125rem;
 
 	--_ui5_avatar_fontsize_XS: 1rem;
 	--_ui5_avatar_fontsize_S: 1.125rem;
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Avatar-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Avatar-parameters.css
@@ -16,6 +16,7 @@
 	--ui5-avatar-accent10: var(--sapBackgroundColor);
 	--ui5-avatar-placeholder: var(--sapBackgroundColor);
 	--_ui5_avatar_outline: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_avatar_focus_offset: 0.125rem;
 
 	--_ui5_avatar_fontsize_XS: 1rem;
 	--_ui5_avatar_fontsize_S: 1.125rem;
diff --git a/packages/main/src/themes/sap_horizon/Avatar-parameters.css b/packages/main/src/themes/sap_horizon/Avatar-parameters.css
@@ -1,7 +1,7 @@
 @import "../base/Avatar-parameters.css";
 
 :root {
-	--_ui5_avatar_focus_offset: 0.125rem;
+	--_ui5_avatar_focus_offset: 0.1875rem;
 	--ui5-avatar-initials-border: 0.0625rem solid var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-border-radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_avatar_fontsize_XS: 1rem;
diff --git a/packages/main/src/themes/sap_horizon_dark/Avatar-parameters.css b/packages/main/src/themes/sap_horizon_dark/Avatar-parameters.css
@@ -1,7 +1,7 @@
 @import "../base/Avatar-parameters.css";
 
 :root {
-	--_ui5_avatar_focus_offset: 0.125rem;
+	--_ui5_avatar_focus_offset: 0.1875rem;
 	--ui5-avatar-initials-border: 0.0625rem solid var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-border-radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_avatar_fontsize_XS: 1rem;
diff --git a/packages/main/src/themes/sap_horizon_hcb/Avatar-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Avatar-parameters.css
@@ -1,6 +1,7 @@
 @import "../base/Avatar-parameters.css";
 
 :root {
+	--_ui5_avatar_focus_offset: 0.125rem;
 	--ui5-avatar-hover-box-shadow-offset: 0px;
 	--ui5-avatar-initials-border: 0.0625rem solid var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-border-radius: var(--sapElement_BorderCornerRadius);
diff --git a/packages/main/src/themes/sap_horizon_hcw/Avatar-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Avatar-parameters.css
@@ -1,6 +1,7 @@
 @import "../base/Avatar-parameters.css";
 
 :root {
+	--_ui5_avatar_focus_offset: 0.125rem;
 	--ui5-avatar-hover-box-shadow-offset: 0px;
 	--ui5-avatar-initials-border: 0.0625rem solid var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-border-radius: var(--sapElement_BorderCornerRadius);

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,8 @@`
`30`	`30`	`box-shadow: var(--ui5-avatar-hover-box-shadow-offset);`
`31`	`31`	`}`
`32`	`32`
`33`		`-:host(:is([interactive][focused]):not([hidden]):not([pressed])) {`
	`33`	`+:host(:is([interactive][desktop]):not([hidden])) .ui5-avatar-root:focus-within,`
	`34`	`+:host(:is([interactive]):not([hidden])) .ui5-avatar-root:focus-visible {`
`34`	`35`	`outline: var(--_ui5_avatar_outline);`
`35`	`36`	`outline-offset: var(--_ui5_avatar_focus_offset);`
`36`	`37`	`}`
`@@ -55,6 +56,7 @@`
`55`	`56`	`outline: none;`
`56`	`57`	`height: 100%;`
`57`	`58`	`width: 100%;`
	`59`	`+ border-radius: inherit;`
`58`	`60`	`}`
`59`	`61`
`60`	`62`	`/* Sizes */`
Original file line number	Diff line number	Diff line change
`@@ -16,4 +16,5 @@`
`16`	`16`	`--ui5-avatar-accent10: #000;`
`17`	`17`	`--ui5-avatar-placeholder: #000;`
`18`	`18`	`--_ui5_avatar_outline: 0.125rem dotted var(--sapContent_FocusColor);`
	`19`	`+ --_ui5_avatar_focus_offset: 0.125rem;`
`19`	`20`	`}`