From 4d334c96359622c85ffa2bda8a4cc0e87f347f82 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 18 Oct 2023 00:32:53 +0200
Subject: [PATCH] feat(MenuBar): Make the menu bar `role=toolbar` and add focus
 handling

For accessibility the toolbar should be implemented using `role=toolbar`.
This requires custom focus handling[1] this is done by making only one element tabable.

[1] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role#description

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/Menu/ActionEntry.js     | 49 ---------------
 src/components/Menu/BaseActionEntry.js | 33 +++++++++++
 src/components/Menu/MenuBar.vue        | 49 +++++++++------
 src/components/Menu/ReadonlyBar.vue    | 27 ++++++---
 src/components/Menu/ToolBarLogic.js    | 82 ++++++++++++++++++++++++++
 5 files changed, 166 insertions(+), 74 deletions(-)
 delete mode 100644 src/components/Menu/ActionEntry.js
 create mode 100644 src/components/Menu/ToolBarLogic.js

diff --git a/src/components/Menu/ActionEntry.js b/src/components/Menu/ActionEntry.js
deleted file mode 100644
index a5666f4efbb..00000000000
--- a/src/components/Menu/ActionEntry.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
- *
- * @author Vinicius Reis <vinicius@nextcloud.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import ActionSingle from './ActionSingle.vue'
-import ActionList from './ActionList.vue'
-
-export default {
-	name: 'ActionEntry',
-	functional: true,
-	render(h, ctx) {
-		const { actionEntry } = ctx.props
-		const { data, props, listeners } = ctx
-		const { key } = data
-
-		const params = {
-			data,
-			key,
-			props,
-			on: listeners,
-		}
-
-		if (actionEntry.component) {
-			return h(actionEntry.component, params)
-		}
-
-		return actionEntry.children
-			? h(ActionList, params)
-			: h(ActionSingle, params)
-	},
-}
diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
index c53d9e82336..fc675cfe678 100644
--- a/src/components/Menu/BaseActionEntry.js
+++ b/src/components/Menu/BaseActionEntry.js
@@ -45,6 +45,10 @@ const BaseActionEntry = {
 			type: Object,
 			required: true,
 		},
+		canBeFocussed: {
+			type: Boolean,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -72,10 +76,20 @@ const BaseActionEntry = {
 			].join(' ')
 		},
 	},
+	watch: {
+		/** Handle tabindex for menu toolbar */
+		canBeFocussed() {
+			this.setTabIndexOnButton()
+		},
+	},
 	mounted() {
 		this.$_updateState = debounce(this.updateState.bind(this), 50)
 		this.$editor.on('update', this.$_updateState)
 		this.$editor.on('selectionUpdate', this.$_updateState)
+		// Initially emit the disabled event to set the state in parent
+		this.$emit('disabled', this.state.disabled)
+		// Initially set the tabindex
+		this.setTabIndexOnButton()
 	},
 	beforeDestroy() {
 		this.$editor.off('update', this.$_updateState)
@@ -84,6 +98,25 @@ const BaseActionEntry = {
 	methods: {
 		updateState() {
 			this.state = getActionState(this.actionEntry, this.$editor)
+			this.$emit('disabled', this.state.disabled)
+		},
+		setTabIndexOnButton() {
+			/** @type {HTMLButtonElement} */
+			const button = this.$el.tagName.toLowerCase() === 'button' ? this.$el : this.$el.querySelector('button')
+
+			if (this.canBeFocussed === null) {
+				button.removeAttribute('tabindex')
+			} else {
+				button.setAttribute('tabindex', this.canBeFocussed ? '0' : '-1')
+			}
+		},
+		/**
+		 * Focus the inner button of this action
+		 */
+		focusButton() {
+			/** @type {HTMLButtonElement} */
+			const button = this.$el.tagName.toLowerCase() === 'button' ? this.$el : this.$el.querySelector('button')
+			button.focus()
 		},
 	},
 }
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index a510a935747..cd1434d641e 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -25,8 +25,8 @@
 	<div :id="randomID"
 		class="text-menubar"
 		data-text-el="menubar"
-		role="menubar"
-		:aria-label="t('text', 'Formatting menu bar')"
+		role="region"
+		:aria-label="t('text', 'Editor actions')"
 		:class="{
 			'text-menubar--ready': isReady,
 			'text-menubar--show': isVisible,
@@ -42,14 +42,26 @@
 
 		<div v-if="$isRichEditor"
 			ref="menubar"
-			role="group"
+			role="toolbar"
 			class="text-menubar__entries"
-			:aria-label="t('text', 'Editor actions')">
-			<ActionEntry v-for="actionEntry of visibleEntries"
-				v-bind="{ actionEntry }"
-				:key="`text-action--${actionEntry.key}`" />
-			<ActionList key="text-action--remain"
-				:action-entry="hiddenEntries">
+			:aria-label="t('text', 'Formatting menu bar')"
+			@keydown.left.stop="handleToolbarNavigation"
+			@keydown.right.stop="handleToolbarNavigation">
+			<!-- The visible inline actions -->
+			<component :is="actionEntry.component ? actionEntry.component : (actionEntry.children ? 'ActionList' : 'ActionSingle')"
+				v-for="actionEntry, index of visibleEntries"
+				ref="menuEntries"
+				:key="actionEntry.key"
+				:action-entry="actionEntry"
+				:can-be-focussed="activeMenuEntry === index"
+				@disabled="disableMenuEntry(actionEntry.key, $event)"
+				@click="activeMenuEntry = index" />
+
+			<!-- The remaining actions -->
+			<ActionList ref="remainingEntries"
+				:action-entry="hiddenEntries"
+				:can-be-focussed="activeMenuEntry === visibleEntries.length"
+				@click="activeMenuEntry = 'remain'">
 				<template #lastAction="{ visible }">
 					<NcActionButton @click="showTranslate">
 						<template #icon>
@@ -75,27 +87,28 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import debounce from 'debounce'
 
+import ActionFormattingHelp from './ActionFormattingHelp.vue'
+import ActionList from './ActionList.vue'
+import ActionSingle from './ActionSingle.vue'
+import CharacterCount from './CharacterCount.vue'
 import HelpModal from '../HelpModal.vue'
+import ToolBarLogic from './ToolBarLogic.js'
+import Translate from './../Modal/Translate.vue'
 import actionsFullEntries from './entries.js'
-import ActionEntry from './ActionEntry.js'
 import { MENU_ID } from './MenuBar.provider.js'
-import ActionList from './ActionList.vue'
 import { DotsHorizontal, TranslateVariant } from '../icons.js'
 import {
 	useEditorMixin,
 	useIsRichEditorMixin,
 	useIsRichWorkspaceMixin,
 } from '../Editor.provider.js'
-import ActionFormattingHelp from './ActionFormattingHelp.vue'
-import CharacterCount from './CharacterCount.vue'
-import Translate from './../Modal/Translate.vue'
 
 export default {
 	name: 'MenuBar',
 	components: {
-		ActionEntry,
 		ActionFormattingHelp,
 		ActionList,
+		ActionSingle,
 		HelpModal,
 		NcActionSeparator,
 		NcActionButton,
@@ -103,6 +116,7 @@ export default {
 		TranslateVariant,
 		Translate,
 	},
+	extends: ToolBarLogic,
 	mixins: [
 		useEditorMixin,
 		useIsRichEditorMixin,
@@ -127,6 +141,7 @@ export default {
 	},
 	data() {
 		return {
+			entries: [...actionsFullEntries],
 			randomID: `menu-bar-${(Math.ceil((Math.random() * 10000) + 500)).toString(16)}`,
 			displayHelp: false,
 			displayTranslate: false,
@@ -158,7 +173,7 @@ export default {
 			return slots - 1
 		},
 		visibleEntries() {
-			const list = [...actionsFullEntries].filter(({ priority }) => {
+			const list = this.entries.filter(({ priority }) => {
 				// if entry do not have priority, we assume it aways will be visible
 				return priority === undefined || priority <= this.iconsLimit
 			})
@@ -170,7 +185,7 @@ export default {
 				key: 'remain',
 				label: this.t('text', 'Remaining actions'),
 				icon: DotsHorizontal,
-				children: [...actionsFullEntries].filter(({ priority }) => {
+				children: this.entries.filter(({ priority }) => {
 					// reverse logic from visibleEntries
 					return priority !== undefined && priority > this.iconsLimit
 				}),
diff --git a/src/components/Menu/ReadonlyBar.vue b/src/components/Menu/ReadonlyBar.vue
index c44e1207047..90049d450e4 100644
--- a/src/components/Menu/ReadonlyBar.vue
+++ b/src/components/Menu/ReadonlyBar.vue
@@ -1,12 +1,16 @@
 <template>
 	<div data-text-el="readonly-bar" class="text-readonly-bar">
 		<div ref="menubar"
-			role="group"
+			role="toolbar"
 			class="text-readonly-bar__entries"
 			:aria-label="t('text', 'Editor actions')">
-			<ActionEntry v-for="actionEntry of visibleEntries"
-				v-bind="{ actionEntry }"
-				:key="`text-action--${actionEntry.key}`" />
+			<component :is="actionEntry.component ? actionEntry.component : (actionEntry.children ? 'ActionList' : 'ActionSingle')"
+				v-for="actionEntry, index of visibleEntries"
+				ref="menuEntries"
+				:key="actionEntry.key"
+				:action-entry="actionEntry"
+				:can-be-focussed="activeMenuEntry === index"
+				@disabled="disableMenuEntry(actionEntry.key, $event)" />
 		</div>
 		<div class="text-menubar__slot">
 			<slot />
@@ -17,14 +21,21 @@
 <script>
 import { defineComponent } from 'vue'
 import { ReadonlyEntries as entries } from './entries.js'
-import ActionEntry from './ActionEntry.js'
+
+import ActionList from './ActionList.vue'
+import ActionSingle from './ActionSingle.vue'
+import ToolBarLogic from './ToolBarLogic.js'
 
 export default defineComponent({
 	name: 'ReadonlyBar',
-	components: { ActionEntry },
-	setup() {
+	components: {
+		ActionList,
+		ActionSingle,
+	},
+	extends: ToolBarLogic,
+	data() {
 		return {
-			visibleEntries: entries,
+			entries,
 		}
 	},
 })
diff --git a/src/components/Menu/ToolBarLogic.js b/src/components/Menu/ToolBarLogic.js
new file mode 100644
index 00000000000..f88fc38f12c
--- /dev/null
+++ b/src/components/Menu/ToolBarLogic.js
@@ -0,0 +1,82 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	data() {
+		return {
+			/** Current menu entry that has focus */
+			activeMenuEntry: 0,
+			entries: [],
+		}
+	},
+	computed: {
+		visibleEntries() {
+			return this.entries
+		},
+	},
+	watch: {
+		visibleEntries() {
+			this.$nextTick(() => {
+				if (this.activeMenuEntry > this.visibleEntries.length || this.visibleEntries[this.activeMenuEntry].disabled) {
+					this.setNextMenuEntry()
+				}
+			})
+		},
+	},
+	methods: {
+		/**
+		 * Update the disabled state of an menu entry
+		 * @param {string} menuKey The key of the menu entry that changed
+		 * @param {boolean} state The new disabled state
+		 */
+		disableMenuEntry(menuKey, state) {
+			const index = this.visibleEntries.findIndex(({ key }) => key === menuKey)
+			this.visibleEntries[index].disabled = state
+			if (state === false && this.activeMenuEntry === index) {
+				this.$nextTick(() => this.setNextMenuEntry())
+			}
+		},
+		/**
+		 * Set the active menu entry to the next one (or reset to first)
+		 */
+		setNextMenuEntry() {
+			// refs is not reactive so we must check this every time
+			const modulo = this.visibleEntries.length + (this.$refs.remainingEntries ? 1 : 0)
+
+			do {
+				this.activeMenuEntry = (this.activeMenuEntry + 1) % modulo
+			} while (this.activeMenuEntry < this.visibleEntries.length && this.visibleEntries[this.activeMenuEntry].disabled)
+		},
+		/**
+		 * Set the active menu entry to the previous one (or reset to last entry (remaining actions))
+		 */
+		setPreviousMenuEntry() {
+			// refs is not reactive so we must check this every time
+			const modulo = this.visibleEntries.length + (this.$refs.remainingEntries ? 1 : 0)
+
+			do {
+				const index = this.activeMenuEntry - 1
+				this.activeMenuEntry = ((index % modulo) + modulo) % modulo // needed as JS does not work with negative modulos
+			} while (this.activeMenuEntry < this.visibleEntries.length && this.visibleEntries[this.activeMenuEntry].disabled)
+		},
+
+		/**
+		 * Handle navigation in toolbar
+		 * @param {KeyboardEvent} event The keydown event
+		 */
+		handleToolbarNavigation(event) {
+			if (event.key === 'ArrowRight') {
+				this.setNextMenuEntry()
+			} else if (event.key === 'ArrowLeft') {
+				this.setPreviousMenuEntry()
+			}
+
+			if (this.activeMenuEntry === this.visibleEntries.length) {
+				this.$refs.remainingEntries?.focusButton?.()
+			} else {
+				// The ref is in no order (ordered by the time they needed to mount), so we need to order them like they are shown on the menu
+				const entries = [...this.$refs.menuEntries].sort((a, b) => this.visibleEntries.findIndex(({ key }) => key === a.$vnode.data.key) - this.visibleEntries.findIndex(({ key }) => key === b.$vnode.data.key))
+				entries[this.activeMenuEntry].focusButton()
+			}
+		},
+	},
+})