♿️ (#2735): add aria-keyshortcuts to menu entries

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

src/components/Menu/ActionSingle.vue

@@ -43,6 +43,8 @@ export default {
 				: Button
 		},
 		bindState() {
+			const { keyshortcuts } = this
+
 			const state = {
 				...this.state,
 			}
@@ -53,7 +55,11 @@ export default {
 				'entry-action-item': this.isItem,
 			}
 
-			// item list bejaviour
+			if (keyshortcuts) {
+				state['aria-keyshortcuts'] = keyshortcuts
+			}
+
+			// item list behaviour
 			if (this.isItem) {
 				state.closeAfterClick = true
 			}

src/components/Menu/BaseActionEntry.js

@@ -26,7 +26,7 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import debounce from 'debounce'
 
 import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js'
-import { getActionState, getKeys } from './utils.js'
+import { getActionState, getKeys, getKeyshortcuts } from './utils.js'
 
 import './ActionEntry.scss'
 
@@ -53,6 +53,9 @@ const BaseActionEntry = {
 		icon() {
 			return this.actionEntry.icon
 		},
+		keyshortcuts() {
+			return getKeyshortcuts(this.actionEntry)
+		},
 		tooltip() {
 			return [this.actionEntry.label, getKeys(this.$isMobile, this.actionEntry)].join(' ')
 		},

src/components/Menu/entries.js

@@ -50,12 +50,14 @@ import {
 import EmojiPickerAction from './EmojiPickerAction.vue'
 import ActionImageUpload from './ActionImageUpload.vue'
 
+import { MODIFIERS } from './keys.js'
+
 export default [
 	{
 		key: 'undo',
 		label: t('text', 'Undo'),
 		keyChar: 'z',
-		keyModifiers: ['ctrl'],
+		keyModifiers: [MODIFIERS.Mod],
 		icon: Undo,
 		action: (command) => command.undo(),
 		priority: 5,
@@ -64,7 +66,7 @@ export default [
 		key: 'redo',
 		label: t('text', 'Redo'),
 		keyChar: 'y',
-		keyModifiers: ['ctrl'],
+		keyModifiers: [MODIFIERS.Mod],
 		icon: Redo,
 		action: (command) => command.redo(),
 		priority: 11,
@@ -73,7 +75,7 @@ export default [
 		key: 'bold',
 		label: t('text', 'Bold'),
 		keyChar: 'b',
-		keyModifiers: ['ctrl'],
+		keyModifiers: [MODIFIERS.Mod],
 		icon: FormatBold,
 		isActive: 'strong',
 		action: (command) => {
@@ -85,7 +87,7 @@ export default [
 		key: 'italic',
 		label: t('text', 'Italic'),
 		keyChar: 'i',
-		keyModifiers: ['ctrl'],
+		keyModifiers: [MODIFIERS.Mod],
 		icon: FormatItalic,
 		isActive: 'em',
 		action: (command) => {
@@ -97,7 +99,7 @@ export default [
 		key: 'underline',
 		label: t('text', 'Underline'),
 		keyChar: 'u',
-		keyModifiers: ['ctrl'],
+		keyModifiers: [MODIFIERS.Mod],
 		icon: FormatUnderline,
 		isActive: 'underline',
 		action: (command) => {
@@ -109,7 +111,7 @@ export default [
 		key: 'strikethrough',
 		label: t('text', 'Strikethrough'),
 		keyChar: 'd',
-		keyModifiers: ['ctrl'],
+		keyModifiers: [MODIFIERS.Mod],
 		icon: FormatStrikethrough,
 		isActive: 'strike',
 		action: (command) => {
@@ -121,7 +123,7 @@ export default [
 		key: 'headings',
 		label: t('text', 'Headings'),
 		keyChar: '1…6',
-		keyModifiers: ['ctrl', 'shift'],
+		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 		visible: false,
 		icon: FormatHeader1,
 		isActive: 'heading',
@@ -187,7 +189,7 @@ export default [
 		key: 'unordered-list',
 		label: t('text', 'Unordered list'),
 		keyChar: '8',
-		keyModifiers: ['ctrl', 'shift'],
+		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 		isActive: 'bulletList',
 		icon: FormatListBulleted,
 		action: (command) => {
@@ -199,7 +201,7 @@ export default [
 		key: 'ordered-list',
 		label: t('text', 'Ordered list'),
 		keyChar: '9',
-		keyModifiers: ['ctrl', 'shift'],
+		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 		isActive: 'orderedList',
 		icon: FormatListNumbered,
 		action: (command) => {
@@ -219,7 +221,7 @@ export default [
 		key: 'blockquote',
 		label: t('text', 'Blockquote'),
 		keyChar: '>',
-		keyModifiers: ['ctrl'],
+		keyModifiers: [MODIFIERS.Mod],
 		isActive: 'blockquote',
 		icon: FormatQuote,
 		action: (command) => {

src/components/Menu/keys.js

@@ -0,0 +1,24 @@
+const isMac = (navigator.userAgent.includes('Mac'))
+
+const MODIFIERS = {
+	Mod: isMac ? 'Meta' : 'Control',
+	Alt: 'Alt', // Option key, on Apple computers.
+	Control: 'Control',
+	Shift: 'Shift',
+
+	// unused
+	// AltGraph: 'AltGraph',
+	// Meta: 'Meta', // Command key on Apple computers
+}
+
+const TRANSLATIONS = {
+	[MODIFIERS.Mod]: t('text', isMac ? 'Command' : 'Control'),
+	[MODIFIERS.Control]: t('text', 'Ctrl'),
+	[MODIFIERS.Alt]: t('text', isMac ? 'Option' : 'Command'),
+	[MODIFIERS.Shift]: t('text', 'Shift'),
+}
+
+export {
+	MODIFIERS,
+	TRANSLATIONS,
+}

src/components/Menu/utils.js

@@ -20,11 +20,10 @@
  *
  */
 
-const translations = {
-	ctrl: t('text', 'Ctrl'),
-	alt: t('text', 'Alt'),
-	shift: t('text', 'Shift'),
-}
+import {
+	TRANSLATIONS,
+	MODIFIERS,
+} from './keys.js'
 
 const getEntryClasses = (actionEntry, isActive) => {
 	return {
@@ -34,13 +33,19 @@ const getEntryClasses = (actionEntry, isActive) => {
 }
 
 const keysString = (keyChar, modifiers = []) => {
-	return Object.entries(translations)
-		.filter(([k, v]) => modifiers.includes(k))
-		.map(([k, v]) => v)
+	return modifiers
+		.map(mod => TRANSLATIONS[mod])
 		.concat(keyChar.toUpperCase())
 		.join('+')
 }
 
+const getKeyshortcuts = ({ keyChar, keyModifiers = [] }) => {
+	return keyModifiers
+		.map(mod => MODIFIERS[mod])
+		.concat(keyChar)
+		.join('+')
+}
+
 const getKeys = (isMobile, { keyChar, keyModifiers }) => {
 	return (!isMobile && keyChar)
 		? `(${keysString(keyChar, keyModifiers)})`
@@ -78,6 +83,7 @@ export {
 	isDisabled,
 	getIsActive,
 	getKeys,
+	getKeyshortcuts,
 	getEntryClasses,
 	getActionState,
 }