diff options
author | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-07-29 18:34:46 +0300 |
---|---|---|
committer | Vinicius Reis (Rebase PR Action) <luiz.vinicius73@gmail.com> | 2022-08-01 14:56:13 +0300 |
commit | c1e9821002bb332c5ffd4c84a37501a25ccf8994 (patch) | |
tree | a6a86166de1193fb978c1e9a32f887e9d776b264 | |
parent | 6b6af3cacd4f480b2aa0fa837e0fb3854a04461f (diff) |
♿️ (#2735): add aria-keyshortcuts to menu entries
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
-rw-r--r-- | src/components/Menu/ActionSingle.vue | 8 | ||||
-rw-r--r-- | src/components/Menu/BaseActionEntry.js | 5 | ||||
-rw-r--r-- | src/components/Menu/entries.js | 22 | ||||
-rw-r--r-- | src/components/Menu/keys.js | 24 | ||||
-rw-r--r-- | src/components/Menu/utils.js | 22 |
5 files changed, 61 insertions, 20 deletions
diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue index 65692d472..e6599c717 100644 --- a/src/components/Menu/ActionSingle.vue +++ b/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 } diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js index 879e3c186..e675bd95b 100644 --- a/src/components/Menu/BaseActionEntry.js +++ b/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(' ') }, diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js index 9af3dd04a..2934a8e3b 100644 --- a/src/components/Menu/entries.js +++ b/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) => { diff --git a/src/components/Menu/keys.js b/src/components/Menu/keys.js new file mode 100644 index 000000000..768c08609 --- /dev/null +++ b/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, +} diff --git a/src/components/Menu/utils.js b/src/components/Menu/utils.js index 6b23db0e7..5ac04c7d5 100644 --- a/src/components/Menu/utils.js +++ b/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, } |