feat(ui5-avatar-group): update focus handling (#8550)

Adjusted ui5-avatar-group 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
SAP · Apr 15, 2024 · 0bb5c9d · 0bb5c9d
1 parent 1acae01
commit 0bb5c9d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts
@@ -14,6 +14,7 @@ import {
 	isEnter,
 	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Button from "./Button.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarGroupType from "./types/AvatarGroupType.js";
@@ -393,6 +394,10 @@ class AvatarGroup extends UI5Element {
 	}
 
 	onEnterDOM() {
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
+
 		ResizeHandler.register(this, this._onResizeHandler);
 	}
 

diff --git a/packages/main/src/themes/AvatarGroup.css b/packages/main/src/themes/AvatarGroup.css
@@ -13,7 +13,8 @@
 	outline: none;
 }
 
-:host([type="Group"]) .ui5-avatar-group-items:focus {
+:host([type="Group"][desktop]) .ui5-avatar-group-items:focus-within,
+:host([type="Group"]) .ui5-avatar-group-items:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 	border-radius: var(--_ui5_avatar_group_focus_border_radius);
@@ -38,6 +39,14 @@
 	pointer-events: none;
 }
 
+.ui5-avatar-group-overflow-btn {
+	overflow: visible;
+}
+
+.ui5-avatar-group-overflow-btn::part(button) {
+	min-width: auto;
+}
+
 ::slotted([ui5-button]:not([hidden])),
 .ui5-avatar-group-overflow-btn:not([hidden]) {
 	--_ui5_button_base_padding: 0;
@@ -47,10 +56,16 @@
 	z-index: 0; /* prevent last visible avatar from covering half of the button */
 }
 
-::slotted([ui5-button][focused]),
-.ui5-avatar-group-overflow-btn[focused] {
+::slotted([ui5-button][desktop]:focus-within),
+.ui5-avatar-group-overflow-btn[desktop]:focus-within {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_overflow_button_focus_offset);
+}
+
+.ui5-avatar-group-overflow-btn::part(button):focus-visible:after {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: 50%;
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

diff --git a/packages/main/src/themes/base/Avatar-parameters.css b/packages/main/src/themes/base/Avatar-parameters.css
@@ -45,6 +45,8 @@
 	--_ui5_avatar_focus_width: 0.0625rem;
 	--_ui5_avatar_focus_color: var(--sapContent_FocusColor);
 
+	--_ui5_avatar_overflow_button_focus_offset: 0.0625rem;
+
 	--_ui5_avatar_fontsize_XS: 0.75rem;
 	--_ui5_avatar_fontsize_S: 1.125rem;
 	--_ui5_avatar_fontsize_M: 1.625rem;