From 6e45c2e3ef371fb0c5e22c0c71825cfce345ff49 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 1 Feb 2024 02:37:59 +0100
Subject: [PATCH] fixup! Make only anchor element focusable

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcListItem/NcListItem.vue | 143 +++++++++++------------
 1 file changed, 65 insertions(+), 78 deletions(-)

diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 972ca39783..f77768693b 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -33,7 +33,7 @@
 			:counter-number="44"
 			counterType="highlighted">
 			<template #icon>
-				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -62,7 +62,7 @@
 			:counter-number="44"
 			counterType="outlined">
 			<template #icon>
-				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -89,7 +89,7 @@
 			:active="true"
 			:counter-number="44">
 			<template #icon>
-				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -121,7 +121,7 @@
 			:counter-number="44"
 			counterType="highlighted">
 			<template #icon>
-				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -146,7 +146,7 @@
 			:counter-number="44"
 			counterType="outlined">
 			<template #icon>
-				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -170,7 +170,7 @@
 			:details="'1h'"
 			:counter-number="44">
 			<template #icon>
-				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -191,7 +191,7 @@
 			:name="'Name of the element'"
 			:bold="false">
 			<template #icon>
-				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -220,7 +220,7 @@
 			:bold="false"
 			:details="'1h'">
 			<template #icon>
-				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -333,28 +333,26 @@
 			:class="{ 'list-item__wrapper--active' : isActive || active }">
 			<div ref="list-item"
 				class="list-item"
-				tabindex="0"
 				@mouseover="handleMouseover"
-				@mouseleave="handleMouseleave"
-				@focus="handleFocus"
-				@blur="handleBlur"
-				@keydown.tab.exact="handleTab"
-				@click="onClick($event, navigate, routerLinkHref)"
-				@keydown.esc="hideActions">
-				<div :class="['list-item-content__wrapper', {
-					'list-item-content__wrapper--compact': compact
-				}]">
-					<!-- @slot This slot is used for the NcAvatar or icon -->
+				@mouseleave="handleMouseleave">
+				<a :id="anchorId || undefined"
+					:aria-label="linkAriaLabel"
+					:class="['list-item__anchor', {
+						'list-item__anchor--compact': compact
+					}]"
+					:href="routerLinkHref || href"
+					:target="target || (href === '#' ? undefined : '_blank')"
+					:rel="href === '#' ? undefined : 'noopener noreferrer'"
+					@focus="showActions"
+					@focusout="handleBlur"
+					@click="onClick($event, navigate, routerLinkHref)"
+					@keydown.enter="onClick($event, navigate, routerLinkHref)"
+					@keydown.esc="hideActions">
+					<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->
 					<slot name="icon" />
 
 					<!-- Main content -->
-					<a :id="anchorId || undefined"
-						tabindex="-1"
-						class="list-item-content"
-						:aria-label="linkAriaLabel"
-						:href="routerLinkHref || href"
-						:target="target || (href === '#' ? undefined : '_blank')"
-						:rel="href === '#' ? undefined : 'noopener noreferrer'">
+					<div class="list-item-content">
 						<div class="list-item-content__main"
 							:class="{ 'list-item-content__main--oneline': oneLine }">
 
@@ -396,20 +394,20 @@
 								</span>
 							</div>
 						</div>
-					</a>
-
-					<!-- Actions -->
-					<div v-show="forceDisplayActions || displayActionsOnHoverFocus"
-						class="list-item-content__actions"
-						@click.prevent.stop="">
-						<NcActions ref="actions"
-							:primary="isActive || active"
-							:aria-label="computedActionsAriaLabel"
-							@update:open="handleActionsUpdateOpen">
-							<!-- @slot Provide the actions for the right side quick menu -->
-							<slot name="actions" />
-						</NcActions>
 					</div>
+				</a>
+
+				<!-- Actions -->
+				<div v-show="forceDisplayActions || displayActionsOnHoverFocus"
+					class="list-item-content__actions"
+					@focusout="handleBlur">
+					<NcActions ref="actions"
+						:primary="isActive || active"
+						:aria-label="computedActionsAriaLabel"
+						@update:open="handleActionsUpdateOpen">
+						<!-- @slot Provide the actions for the right side quick menu -->
+						<slot name="actions" />
+					</NcActions>
 				</div>
 
 				<!-- @slot Extra elements below the item -->
@@ -568,7 +566,6 @@ export default {
 	data() {
 		return {
 			hovered: false,
-			focused: false,
 			hasActions: false,
 			hasSubname: false,
 			displayActionsOnHoverFocus: false,
@@ -619,7 +616,7 @@ export default {
 		/**
 		 * Handle link click
 		 *
-		 * @param {PointerEvent} event - Native click event
+		 * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
 		 * @param {Function} [navigate] - VueRouter link's navigate if any
 		 * @param {string} [routerLinkHref] - VueRouter link's href
 		 */
@@ -634,14 +631,11 @@ export default {
 			if (routerLinkHref) {
 				navigate?.(event)
 				event.preventDefault()
+			} else {
+				window.location = this.href
 			}
 		},
 
-		handleMouseover() {
-			this.showActions()
-			this.hovered = true
-		},
-
 		showActions() {
 			if (this.hasActions) {
 				this.displayActionsOnHoverFocus = true
@@ -654,15 +648,14 @@ export default {
 		},
 
 		/**
-		 * Show actions upon focus
+		 * @param {FocusEvent} event UI event
 		 */
-		handleFocus() {
-			this.focused = true
-			this.showActions()
-		},
-
-		handleBlur() {
-			this.focused = false
+		handleBlur(event) {
+			// do not hide if focus is kept within
+			if (this.$refs['list-item'].contains(event.relatedTarget)) {
+				return
+			}
+			this.hideActions()
 		},
 
 		/**
@@ -675,20 +668,9 @@ export default {
 			this.hovered = false
 		},
 
-		/**
-		 * This method checks if the root element of the component is focused and
-		 * if that's the case it focuses the actions button if available
-		 *
-		 * @param {Event} e the keydown event
-		 */
-		handleTab(e) {
-			if (this.focused && this.hasActions) {
-				e.preventDefault()
-				this.$refs.actions.$refs.menuButton.$el.focus()
-				this.focused = false
-			} else {
-				this.displayActionsOnHoverFocus = false
-			}
+		handleMouseover() {
+			this.showActions()
+			this.hovered = true
 		},
 
 		handleActionsUpdateOpen(e) {
@@ -723,14 +705,13 @@ export default {
 	width: 100%;
 
 	&--active,
-	&:active,
 	&.active {
 		.list-item {
 			background-color: var(--color-primary-element);
-			&:active,
 			&:hover,
-			&:focus,
-			&:focus-visible {
+			&:focus-within,
+			&:has(:focus-visible),
+			&:has(:active) {
 				background-color: var(--color-primary-element-hover);
 			}
 		}
@@ -748,7 +729,7 @@ export default {
 // NcListItem
 .list-item {
 	box-sizing: border-box;
-	display: block;
+	display: flex;
 	position: relative;
 	flex: 0 0 auto;
 	justify-content: flex-start;
@@ -762,23 +743,29 @@ export default {
 	cursor: pointer;
 	transition: background-color var(--animation-quick) ease-in-out;
 	list-style: none;
-	&:active,
 	&:hover,
-	&:focus,
-	&:focus-visible {
+	&:focus-within,
+	&:has(:active),
+	&:has(:focus-visible) {
 		background-color: var(--color-background-hover);
 	}
 
-	&:focus-visible {
+	&:has(&__anchor:focus-visible) {
 		outline: 2px solid var(--color-main-text);
 		box-shadow: 0 0 0 4px var(--color-main-background);
 	}
 
-	&-content__wrapper {
+	&__anchor {
 		display: flex;
+		flex: 1 0 auto;
 		align-items: center;
 		height: 48px;
 
+		// This is handled by the parent container
+		&:focus-visible {
+			outline: none;
+		}
+
 		&--compact {
 			height: 36px;