From d07f80a0e88911df5ac6f1c778a24d35ee13e266 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Sun, 27 Aug 2023 14:21:53 +0200
Subject: [PATCH 1/3] listen for focus/blur events in container

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue    | 14 ++---
 .../SetContacts/SetContacts.vue               |  6 +-
 .../Participant/Participant.vue               |  3 +-
 src/composables/useArrowNavigation.js         | 62 ++++++++++++-------
 4 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 515ba15246a..91c56fbd34b 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -167,6 +167,7 @@
 							<NcAppNavigationCaption :title="t('spreed', 'Users')" />
 							<NcListItem v-for="item of searchResultsUsers"
 								:key="`user_${item.id}`"
+								:anchor-id="`user_${item.id}`"
 								:title="item.label"
 								@click="createAndJoinConversation(item)">
 								<template #icon>
@@ -182,6 +183,7 @@
 								<NcAppNavigationCaption :title="t('spreed', 'Groups')" />
 								<NcListItem v-for="item of searchResultsGroups"
 									:key="`group_${item.id}`"
+									:anchor-id="`group_${item.id}`"
 									:title="item.label"
 									@click="createAndJoinConversation(item)">
 									<template #icon>
@@ -195,6 +197,7 @@
 								<NcAppNavigationCaption :title="t('spreed', 'Circles')" />
 								<NcListItem v-for="item of searchResultsCircles"
 									:key="`circle_${item.id}`"
+									:anchor-id="`circle_${item.id}`"
 									:title="item.label"
 									@click="createAndJoinConversation(item)">
 									<template #icon>
@@ -309,7 +312,7 @@ export default {
 		const leftSidebar = ref(null)
 		const searchBox = ref(null)
 
-		const { initializeNavigation } = useArrowNavigation(leftSidebar, searchBox)
+		const { initializeNavigation } = useArrowNavigation(leftSidebar, searchBox, '.list-item')
 
 		return {
 			initializeNavigation,
@@ -539,9 +542,6 @@ export default {
 				this.searchResultsGroups = this.searchResults.filter((match) => match.source === 'groups')
 				this.searchResultsCircles = this.searchResults.filter((match) => match.source === 'circles')
 				this.contactsLoading = false
-				this.$nextTick(() => {
-					this.initializeNavigation('.list-item')
-				})
 			} catch (exception) {
 				if (CancelableRequest.isCancel(exception)) {
 					return
@@ -563,9 +563,6 @@ export default {
 				const response = await request({ searchText: this.searchText })
 				this.searchResultsListedConversations = response.data.ocs.data
 				this.listedConversationsLoading = false
-				this.$nextTick(() => {
-					this.initializeNavigation('.list-item')
-				})
 			} catch (exception) {
 				if (CancelableRequest.isCancel(exception)) {
 					return
@@ -577,6 +574,7 @@ export default {
 
 		async fetchSearchResults() {
 			await Promise.all([this.fetchPossibleConversations(), this.fetchListedConversations()])
+			this.initializeNavigation()
 		},
 
 		/**
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
index cac10440d96..6019911950c 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -97,7 +97,7 @@ export default {
 		const wrapper = ref(null)
 		const setContacts = ref(null)
 
-		const { initializeNavigation } = useArrowNavigation(wrapper, setContacts)
+		const { initializeNavigation } = useArrowNavigation(wrapper, setContacts, '.participant-row')
 
 		return {
 			initializeNavigation,
@@ -196,7 +196,7 @@ export default {
 					this.cachedFullSearchResults = this.searchResults
 				}
 				this.$nextTick(() => {
-					this.initializeNavigation('.participant-row')
+					this.initializeNavigation()
 				})
 			} catch (exception) {
 				if (CancelableRequest.isCancel(exception)) {
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index ac7d554a101..b0bfac70b8f 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -20,7 +20,8 @@
 -->
 
 <template>
-	<li class="participant-row"
+	<li :id="`${participant.source}_${participant.id}`"
+		class="participant-row"
 		:class="{
 			'offline': isOffline,
 			'currentUser': isSelf,
diff --git a/src/composables/useArrowNavigation.js b/src/composables/useArrowNavigation.js
index eab5748b898..e68997dbe8b 100644
--- a/src/composables/useArrowNavigation.js
+++ b/src/composables/useArrowNavigation.js
@@ -19,10 +19,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { onMounted, ref, unref } from 'vue'
+import { computed, onMounted, ref, unref } from 'vue'
 
 /**
  * Mount navigation according to https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
+ * Item elements should have a specific selector and unique id
  * ArrowDown or ArrowUp keys - to move through the itemElements list
  * Enter key - to focus first element and click it
  * (if confirmEnter = true) first Enter keydown to focus first element, second - to click selected
@@ -31,16 +32,41 @@ import { onMounted, ref, unref } from 'vue'
  *
  * @param {import('vue').Ref | HTMLElement} listElementRef component ref to mount navigation
  * @param {import('vue').Ref} defaultElementRef component ref to return focus to // Vue component
+ * @param {string} selector native selector of elements to look for
  * @param {object} options navigation options
  * @param {boolean} [options.confirmEnter=false] flag to confirm Enter click
  */
-export function useArrowNavigation(listElementRef, defaultElementRef, options = { confirmEnter: false }) {
+export function useArrowNavigation(listElementRef, defaultElementRef, selector, options = { confirmEnter: false }) {
 	const listRef = ref(null)
 	const defaultRef = ref(null)
+
 	const itemElements = ref([])
+	const itemElementsIdMap = computed(() => itemElements.value.map(item => item.id))
+	const itemSelector = ref(selector)
+
 	const focusedIndex = ref(null)
 	const isConfirmationEnabled = ref(null)
 
+	// Set focused index according to selected element
+	const handleFocusEvent = (event) => {
+		const newIndex = itemElementsIdMap.value.indexOf(event.target?.id)
+
+		// Quit if triggered by arrow navigation as already handled
+		// or if using Tab key to navigate, and going through NcActions
+		if (focusedIndex.value !== newIndex && newIndex !== -1) {
+			focusedIndex.value = newIndex
+		}
+	}
+
+	// Reset focused index if focus moved out of navigation area or moved to the defaultRef
+	const handleBlurEvent = (event) => {
+		if (!listRef.value.contains(event.relatedTarget)
+			|| defaultRef.value?.$el.contains(event.relatedTarget)
+			|| defaultRef.value.contains?.(event.relatedTarget)) {
+			focusedIndex.value = null
+		}
+	}
+
 	// Add event listeners for navigation list and set a default focus element
 	onMounted(() => {
 		// depending on ref, listElementRef could be either a component or a DOM element
@@ -49,7 +75,7 @@ export function useArrowNavigation(listElementRef, defaultElementRef, options =
 		isConfirmationEnabled.value = options.confirmEnter
 
 		listRef.value.addEventListener('keydown', (event) => {
-			if (itemElements.value?.length) {
+			if (itemElementsIdMap.value?.length) {
 				if (event.key === 'ArrowDown') {
 					focusNextElement(event)
 				} else if (event.key === 'ArrowUp') {
@@ -64,25 +90,15 @@ export function useArrowNavigation(listElementRef, defaultElementRef, options =
 	})
 
 	/**
-	 * Collect all DOM elements specified by selector
-	 *
-	 * @param {string} selector selector to look for
+	 * Update list of navigate-able elements specified by selector.
+	 * Put a listener for focus/blur events on navigation area
 	 */
-	function initializeNavigation(selector) {
-		itemElements.value = Array.from(listRef.value.querySelectorAll(selector))
+	function initializeNavigation() {
+		itemElements.value = Array.from(listRef.value.querySelectorAll(itemSelector.value))
 		focusedIndex.value = null
 
-		itemElements.value.forEach((item, index) => {
-			item.addEventListener('focus', (event) => {
-				focusedIndex.value = index
-			})
-
-			item.addEventListener('blur', (event) => {
-				if (!itemElements.value.includes(event.relatedTarget)) {
-					focusedIndex.value = null
-				}
-			})
-		})
+		listRef.value.addEventListener('focus', handleFocusEvent, true)
+		listRef.value.addEventListener('blur', handleBlurEvent, true)
 	}
 
 	/**
@@ -127,7 +143,9 @@ export function useArrowNavigation(listElementRef, defaultElementRef, options =
 			nativelyFocusElement(0)
 
 			// if confirmEnter = false, first Enter keydown clicks on item, otherwise only focuses it
-			if (!isConfirmationEnabled.value && event?.key === 'Enter') {
+			// Additionally check whether the Element is still in the DOM
+			if (!isConfirmationEnabled.value && event?.key === 'Enter'
+				&& listRef.value.contains(itemElements.value[0])) {
 				itemElements.value[0].click()
 			}
 		}
@@ -145,7 +163,7 @@ export function useArrowNavigation(listElementRef, defaultElementRef, options =
 			return
 		}
 
-		if (focusedIndex.value < itemElements.value.length - 1) {
+		if (focusedIndex.value < itemElementsIdMap.value.length - 1) {
 			nativelyFocusElement(focusedIndex.value + 1)
 		} else {
 			nativelyFocusElement(0)
@@ -166,7 +184,7 @@ export function useArrowNavigation(listElementRef, defaultElementRef, options =
 		if (focusedIndex.value > 0) {
 			nativelyFocusElement(focusedIndex.value - 1)
 		} else {
-			nativelyFocusElement(itemElements.value.length - 1)
+			nativelyFocusElement(itemElementsIdMap.value.length - 1)
 		}
 	}
 

From b51364003f0f699fafb5a965627f607e0d37a793 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Sun, 27 Aug 2023 14:26:13 +0200
Subject: [PATCH 2/3] add method to reset current navigation

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue           |  4 +++-
 .../NewGroupConversation/SetContacts/SetContacts.vue |  4 +++-
 src/composables/useArrowNavigation.js                | 12 ++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 91c56fbd34b..d547afb48cc 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -312,10 +312,11 @@ export default {
 		const leftSidebar = ref(null)
 		const searchBox = ref(null)
 
-		const { initializeNavigation } = useArrowNavigation(leftSidebar, searchBox, '.list-item')
+		const { initializeNavigation, resetNavigation } = useArrowNavigation(leftSidebar, searchBox, '.list-item')
 
 		return {
 			initializeNavigation,
+			resetNavigation,
 			leftSidebar,
 			searchBox,
 		}
@@ -513,6 +514,7 @@ export default {
 			}, 500)
 		},
 		debounceFetchSearchResults: debounce(function() {
+			this.resetNavigation()
 			if (this.isSearching) {
 				this.fetchSearchResults()
 			}
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
index 6019911950c..7d8f5e96dc0 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -97,10 +97,11 @@ export default {
 		const wrapper = ref(null)
 		const setContacts = ref(null)
 
-		const { initializeNavigation } = useArrowNavigation(wrapper, setContacts, '.participant-row')
+		const { initializeNavigation, resetNavigation } = useArrowNavigation(wrapper, setContacts, '.participant-row')
 
 		return {
 			initializeNavigation,
+			resetNavigation,
 			wrapper,
 			setContacts,
 		}
@@ -176,6 +177,7 @@ export default {
 		},
 
 		debounceFetchSearchResults: debounce(function() {
+			this.resetNavigation()
 			this.fetchSearchResults()
 		}, 250),
 
diff --git a/src/composables/useArrowNavigation.js b/src/composables/useArrowNavigation.js
index e68997dbe8b..8c210358da7 100644
--- a/src/composables/useArrowNavigation.js
+++ b/src/composables/useArrowNavigation.js
@@ -101,6 +101,17 @@ export function useArrowNavigation(listElementRef, defaultElementRef, selector,
 		listRef.value.addEventListener('blur', handleBlurEvent, true)
 	}
 
+	/**
+	 * Remove listeners from navigation area, reset list of elements
+	 * (to made navigation unavailable during fetching results)
+	 */
+	function resetNavigation() {
+		itemElements.value = []
+
+		listRef.value.removeEventListener('focus', handleFocusEvent, true)
+		listRef.value.removeEventListener('blur', handleBlurEvent, true)
+	}
+
 	/**
 	 * Focus natively the DOM element specified by index
 	 *
@@ -190,5 +201,6 @@ export function useArrowNavigation(listElementRef, defaultElementRef, selector,
 
 	return {
 		initializeNavigation,
+		resetNavigation,
 	}
 }

From 8a2bf82d3b6afef9546d760311dbd3f40cf37daa Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 29 Aug 2023 17:28:24 +0200
Subject: [PATCH 3/3] replace id on navigation items with data-* attribute

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationsList/Conversation.vue        |  2 +-
 src/components/LeftSidebar/LeftSidebar.vue    |  6 ++---
 .../Participant/Participant.vue               |  2 +-
 src/composables/useArrowNavigation.js         | 26 +++++++++++++------
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 665955f5a51..d8789652f88 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -24,7 +24,7 @@
 		:title="item.displayName"
 		class="conversation-item"
 		:class="{'unread-mention-conversation': item.unreadMention}"
-		:anchor-id="`conversation_${item.token}`"
+		:data-nav-id="`conversation_${item.token}`"
 		:actions-aria-label="t('spreed', 'Conversation actions')"
 		:to="to"
 		:bold="!!item.unreadMessages"
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index d547afb48cc..d6e293ba333 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -167,7 +167,7 @@
 							<NcAppNavigationCaption :title="t('spreed', 'Users')" />
 							<NcListItem v-for="item of searchResultsUsers"
 								:key="`user_${item.id}`"
-								:anchor-id="`user_${item.id}`"
+								:data-nav-id="`user_${item.id}`"
 								:title="item.label"
 								@click="createAndJoinConversation(item)">
 								<template #icon>
@@ -183,7 +183,7 @@
 								<NcAppNavigationCaption :title="t('spreed', 'Groups')" />
 								<NcListItem v-for="item of searchResultsGroups"
 									:key="`group_${item.id}`"
-									:anchor-id="`group_${item.id}`"
+									:data-nav-id="`group_${item.id}`"
 									:title="item.label"
 									@click="createAndJoinConversation(item)">
 									<template #icon>
@@ -197,7 +197,7 @@
 								<NcAppNavigationCaption :title="t('spreed', 'Circles')" />
 								<NcListItem v-for="item of searchResultsCircles"
 									:key="`circle_${item.id}`"
-									:anchor-id="`circle_${item.id}`"
+									:data-nav-id="`circle_${item.id}`"
 									:title="item.label"
 									@click="createAndJoinConversation(item)">
 									<template #icon>
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index b0bfac70b8f..3ac6574dd1e 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<li :id="`${participant.source}_${participant.id}`"
+	<li :data-nav-id="`${participant.source}_${participant.id}`"
 		class="participant-row"
 		:class="{
 			'offline': isOffline,
diff --git a/src/composables/useArrowNavigation.js b/src/composables/useArrowNavigation.js
index 8c210358da7..21ec008ba9b 100644
--- a/src/composables/useArrowNavigation.js
+++ b/src/composables/useArrowNavigation.js
@@ -23,12 +23,16 @@ import { computed, onMounted, ref, unref } from 'vue'
 
 /**
  * Mount navigation according to https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
- * Item elements should have a specific selector and unique id
- * ArrowDown or ArrowUp keys - to move through the itemElements list
- * Enter key - to focus first element and click it
- * (if confirmEnter = true) first Enter keydown to focus first element, second - to click selected
- * Escape key - to return focus to the default element, if one of the items is focused already
- * Backspace key - to return focus to the default element, if one of the items is focused already
+ * Item elements should have:
+ * - specific valid CSS selector (tag, class or another attribute)
+ * - unique "data-nav-id" attribute (on element or its parent, if it's not possible to pass it through the wrapper)
+ *
+ * Controls:
+ * - ArrowDown or ArrowUp keys - to move through the itemElements list
+ * - Enter key - to focus first element and click it
+ *   (if confirmEnter = true) first Enter keydown to focus first element, second - to click selected
+ * - Escape key - to return focus to the default element, if one of the items is focused already
+ * - Backspace key - to return focus to the default element, if one of the items is focused already
  *
  * @param {import('vue').Ref | HTMLElement} listElementRef component ref to mount navigation
  * @param {import('vue').Ref} defaultElementRef component ref to return focus to // Vue component
@@ -40,8 +44,14 @@ export function useArrowNavigation(listElementRef, defaultElementRef, selector,
 	const listRef = ref(null)
 	const defaultRef = ref(null)
 
+	/**
+	 * @constant
+	 * @type {import('vue').Ref<HTMLElement[]>}
+	 */
 	const itemElements = ref([])
-	const itemElementsIdMap = computed(() => itemElements.value.map(item => item.id))
+	const itemElementsIdMap = computed(() => itemElements.value.map(item => {
+		return item.getAttribute('data-nav-id') || item.parentElement.getAttribute('data-nav-id')
+	}))
 	const itemSelector = ref(selector)
 
 	const focusedIndex = ref(null)
@@ -49,7 +59,7 @@ export function useArrowNavigation(listElementRef, defaultElementRef, selector,
 
 	// Set focused index according to selected element
 	const handleFocusEvent = (event) => {
-		const newIndex = itemElementsIdMap.value.indexOf(event.target?.id)
+		const newIndex = itemElementsIdMap.value.indexOf(event.target?.getAttribute('data-nav-id'))
 
 		// Quit if triggered by arrow navigation as already handled
 		// or if using Tab key to navigate, and going through NcActions