diff --git a/docs/designers-developers/faq.md b/docs/designers-developers/faq.md index 4917ac8f82e3c1..9bd9c8fae2530a 100644 --- a/docs/designers-developers/faq.md +++ b/docs/designers-developers/faq.md @@ -102,13 +102,13 @@ This is the canonical list of keyboard shortcuts: Navigate to a the next part of the editor (alternative). - Shift+Alt+N - N + Ctrl+Alt+N + N Navigate to the previous part of the editor (alternative). - Shift+Alt+P - P + Ctrl+Alt+P + P Navigate to the nearest toolbar. diff --git a/packages/components/src/higher-order/navigate-regions/index.js b/packages/components/src/higher-order/navigate-regions/index.js index ed5fb89dc7cf63..1d201be72e7133 100644 --- a/packages/components/src/higher-order/navigate-regions/index.js +++ b/packages/components/src/higher-order/navigate-regions/index.js @@ -8,6 +8,7 @@ import classnames from 'classnames'; */ import { Component } from '@wordpress/element'; import { createHigherOrderComponent } from '@wordpress/compose'; +import { rawShortcut } from '@wordpress/keycodes'; /** * Internal dependencies @@ -67,9 +68,9 @@ export default createHigherOrderComponent( bindGlobal shortcuts={ { 'ctrl+`': this.focusNextRegion, - 'shift+alt+n': this.focusNextRegion, + [ rawShortcut.access( 'n' ) ]: this.focusNextRegion, 'ctrl+shift+`': this.focusPreviousRegion, - 'shift+alt+p': this.focusPreviousRegion, + [ rawShortcut.access( 'p' ) ]: this.focusPreviousRegion, } } /> diff --git a/packages/components/src/keyboard-shortcuts/index.js b/packages/components/src/keyboard-shortcuts/index.js index c086d922f348c9..d4b12867e08b6f 100644 --- a/packages/components/src/keyboard-shortcuts/index.js +++ b/packages/components/src/keyboard-shortcuts/index.js @@ -21,7 +21,22 @@ class KeyboardShortcuts extends Component { const { keyTarget = document } = this; this.mousetrap = new Mousetrap( keyTarget ); + forEach( this.props.shortcuts, ( callback, key ) => { + if ( process.env.NODE_ENV === 'development' ) { + const keys = key.split( '+' ); + const modifiers = new Set( keys.filter( ( value ) => value.length > 1 ) ); + const hasAlt = modifiers.has( 'alt' ); + const hasShift = modifiers.has( 'shift' ); + + if ( + ( modifiers.size === 1 && hasAlt ) || + ( modifiers.size === 2 && hasAlt && hasShift ) + ) { + throw new Error( `Cannot bind ${ key }. Alt and Shift+Alt modifiers are reserved for character input.` ); + } + } + const { bindGlobal, eventName } = this.props; const bindFn = bindGlobal ? 'bindGlobal' : 'bind'; this.mousetrap[ bindFn ]( key, callback, eventName ); diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js index 22f160b7727d82..5c6037c0467f4b 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js @@ -18,7 +18,6 @@ const { ctrl, alt, ctrlShift, - shiftAlt, } = displayShortcutList; const globalShortcuts = { @@ -60,11 +59,11 @@ const globalShortcuts = { ariaLabel: shortcutAriaLabel.ctrlShift( '`' ), }, { - keyCombination: shiftAlt( 'n' ), + keyCombination: access( 'n' ), description: __( 'Navigate to the next part of the editor (alternative).' ), }, { - keyCombination: shiftAlt( 'p' ), + keyCombination: access( 'p' ), description: __( 'Navigate to the previous part of the editor (alternative).' ), }, {