Adjust clashing shortcuts used for character input (WordPress#14681)

* Adjust clashing shortcuts used for character input * Update modal * adds docs correction to correspond, adds inlined script to remove production dead code
mchowning · Apr 15, 2019 · 58618d1 · 58618d1
1 parent 193c76b
commit 58618d1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/docs/designers-developers/faq.md b/docs/designers-developers/faq.md
@@ -102,13 +102,13 @@ This is the canonical list of keyboard shortcuts:
 		</tr>
 		<tr>
 			<td>Navigate to a the next part of the editor (alternative).</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>N</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌥</kbd><kbd>N</kbd></td>
+			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>N</kbd></td>
+			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>N</kbd></td>
 		</tr>
 		<tr>
 			<td>Navigate to the previous part of the editor (alternative).</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>P</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌥</kbd><kbd>P</kbd></td>
+			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>P</kbd></td>
+			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>P</kbd></td>
 		</tr>
 		<tr>
 			<td>Navigate to the nearest toolbar.</td>

diff --git 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,
 							} }
 						/>
 						<WrappedComponent { ...this.props } />

diff --git 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
@@ -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).' ),
 		},
 		{