fix(theming): App order settings - ensure the focus is kept on button

When pressing a button for changing the app order that button should keep the focus after reordering the list.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 55 insertions, 4 deletions

diff --git a/apps/theming/src/components/AppOrderSelectorElement.vue b/apps/theming/src/components/AppOrderSelectorElement.vue
index ee795b6272a..73da7579d59 100644
--- a/apps/theming/src/components/AppOrderSelectorElement.vue
+++ b/apps/theming/src/components/AppOrderSelectorElement.vue
@@ -23,20 +23,22 @@
 
 		<div class="order-selector-element__actions">
 			<NcButton v-show="!isFirst && !app.default"
+				ref="buttonUp"
 				:aria-label="t('settings', 'Move up')"
 				data-cy-app-order-button="up"
 				type="tertiary-no-background"
-				@click="$emit('move:up')">
+				@click="moveUp">
 				<template #icon>
 					<IconArrowUp :size="20" />
 				</template>
 			</NcButton>
 			<div v-show="isFirst || !!app.default" aria-hidden="true" class="order-selector-element__placeholder" />
 			<NcButton v-show="!isLast && !app.default"
+				ref="buttonDown"
 				:aria-label="t('settings', 'Move down')"
 				data-cy-app-order-button="down"
 				type="tertiary-no-background"
-				@click="$emit('move:down')">
+				@click="moveDown">
 				<template #icon>
 					<IconArrowDown :size="20" />
 				</template>
@@ -47,8 +49,10 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue'
+
 import { translate as t } from '@nextcloud/l10n'
-import { PropType, defineComponent } from 'vue'
+import { defineComponent, nextTick, onUpdated, ref } from 'vue'
 
 import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
 import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
@@ -86,8 +90,55 @@ export default defineComponent({
 		'move:up': () => true,
 		'move:down': () => true,
 	},
-	setup() {
+	setup(props, { emit }) {
+		const buttonUp = ref()
+		const buttonDown = ref()
+
+		/**
+		 * Used to decide if we need to trigger focus() an a button on update
+		 */
+		let needsFocus = 0
+
+		/**
+		 * Handle move up, ensure focus is kept on the button
+		 */
+		const moveUp = () => {
+			emit('move:up')
+			needsFocus = 1 // request focus on buttonUp
+		}
+
+		/**
+		 * Handle move down, ensure focus is kept on the button
+		 */
+		 const moveDown = () => {
+			emit('move:down')
+			needsFocus = -1 // request focus on buttonDown
+		}
+
+		/**
+		 * onUpdated hook is used to reset the focus on the last used button (if requested)
+		 * If the button is now visible anymore (because this element is the first/last) then the opposite button is focussed
+		 */
+		onUpdated(() => {
+			if (needsFocus !== 0) {
+				// focus requested
+				if ((needsFocus === 1 || props.isLast) && !props.isFirst) {
+					// either requested to btn up and it is not the first, or it was requested to btn down but it is the last
+					nextTick(() => buttonUp.value.$el.focus())
+				} else {
+					nextTick(() => buttonDown.value.$el.focus())
+				}
+			}
+			needsFocus = 0
+		})
+
 		return {
+			buttonUp,
+			buttonDown,
+
+			moveUp,
+			moveDown,
+
 			t,
 		}
 	},