[a11y] add aria-keyshortcuts

cypress/e2e/shortcuts.spec.js

@@ -0,0 +1,89 @@
+/**
+ * @copyright Copyright (c) 2022 Vinicius Reis <[email protected]>
+ *
+ * @author Vinicius Reis <[email protected]>
+ *
+ * @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
+ * 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 { randHash } from '../utils/index.js'
+
+const randUser = randHash()
+
+const prepareTest = () => {
+	return cy.openFile(`${Cypress.currentTest.title}.md`)
+		.then(() => {
+			return cy.getContent()
+				.type(Cypress.currentTest.title)
+				.type('{selectall}')
+		})
+}
+
+const applyTest = (shortcut, tag) => {
+	cy.getContent()
+		.type(shortcut)
+
+	return cy.getContent()
+		.find(tag)
+		.should('contain', Cypress.currentTest.title)
+}
+
+const shortcuts = {
+	bold: ['{ctrl}b', 'strong'],
+	italic: ['{ctrl}i', 'em'],
+	underline: ['{ctrl}u', 'u'],
+	strikethrough: ['{ctrl}{shift}x', 's'],
+	blockquote: ['{ctrl}{shift}b', 'blockquote'],
+	codeblock: ['{ctrl}{alt}c', 'pre'],
+	'ordered-list': ['{ctrl}{shift}7', 'ol'],
+	'unordered-list': ['{ctrl}{shift}8', 'ul'],
+	'task-list': ['{ctrl}{shift}9', 'ul[data-type="taskList"]'],
+	...Array.from({ length: 6 }).reduce((acc, _, index) => {
+		const num = index + 1
+		const tag = `h${num}`
+		acc[`heading-${tag}`] = [`{ctrl}{shift}${num}`, tag]
+
+		return acc
+	}, {}),
+}
+
+describe('keyboard shortcuts', () => {
+	before(() => {
+		cy.nextcloudCreateUser(randUser, 'password')
+	})
+
+	beforeEach(() => {
+		cy.login(randUser, 'password')
+			.then(() => {
+				return cy.uploadFile(
+					'empty.md',
+					'text/markdown',
+					`${Cypress.currentTest.title}.md`
+				)
+			})
+			.then(() => cy.reloadFileList())
+	})
+
+	Object.entries(shortcuts)
+		.forEach(([name, [shortcut, tag]]) => {
+			it(name, () => {
+				prepareTest()
+					.then(() => applyTest(shortcut, tag))
+			})
+		})
+
+})

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) => {
@@ -108,8 +110,8 @@ export default [
 	{
 		key: 'strikethrough',
 		label: t('text', 'Strikethrough'),
-		keyChar: 'd',
-		keyModifiers: ['ctrl'],
+		keyChar: 'x',
+		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 		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) => {
@@ -198,8 +200,8 @@ export default [
 	{
 		key: 'ordered-list',
 		label: t('text', 'Ordered list'),
-		keyChar: '9',
-		keyModifiers: ['ctrl', 'shift'],
+		keyChar: '7',
+		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 		isActive: 'orderedList',
 		icon: FormatListNumbered,
 		action: (command) => {
@@ -210,6 +212,8 @@ export default [
 	{
 		key: 'task-list',
 		label: t('text', 'To-Do list'),
+		keyChar: '9',
+		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 		isActive: 'taskList',
 		icon: FormatListCheckbox,
 		action: (command) => command.toggleTaskList(),
@@ -218,8 +222,8 @@ export default [
 	{
 		key: 'blockquote',
 		label: t('text', 'Blockquote'),
-		keyChar: '>',
-		keyModifiers: ['ctrl'],
+		keyChar: 'b',
+		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 		isActive: 'blockquote',
 		icon: FormatQuote,
 		action: (command) => {
@@ -276,6 +280,8 @@ export default [
 	{
 		key: 'code-block',
 		label: t('text', 'Code block'),
+		keyChar: 'c',
+		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Alt],
 		isActive: 'codeBlock',
 		icon: CodeTags,
 		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]: isMac ? t('text', 'Command') : t('text', 'Control'),
+	[MODIFIERS.Control]: t('text', 'Ctrl'),
+	[MODIFIERS.Alt]: t('text', isMac ? 'Option' : 'Alt'),
+	[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,
 }