From 8178b6f6d86c37b1e39b676eaa7b8af0a241f3df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 2 Sep 2021 18:25:52 +0300 Subject: [PATCH 1/2] Components: ColorPicker: replace global shortcut event handlers with local ones --- packages/components/src/color-picker/alpha.js | 116 ++++++++-------- packages/components/src/color-picker/hue.js | 126 ++++++++++-------- .../components/src/color-picker/saturation.js | 111 ++++++++------- packages/keycodes/README.md | 16 +++ packages/keycodes/src/index.js | 20 +++ 5 files changed, 227 insertions(+), 162 deletions(-) diff --git a/packages/components/src/color-picker/alpha.js b/packages/components/src/color-picker/alpha.js index 5a550d975a198..998704ce0f1e4 100644 --- a/packages/components/src/color-picker/alpha.js +++ b/packages/components/src/color-picker/alpha.js @@ -35,14 +35,23 @@ import { noop } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; -import { TAB } from '@wordpress/keycodes'; +import { + TAB, + UP, + DOWN, + RIGHT, + LEFT, + PAGEUP, + PAGEDOWN, + HOME, + END, +} from '@wordpress/keycodes'; import { pure } from '@wordpress/compose'; /** * Internal dependencies */ import { calculateAlphaChange } from './utils'; -import KeyboardShortcuts from '../keyboard-shortcuts'; export class Alpha extends Component { constructor() { @@ -54,6 +63,7 @@ export class Alpha extends Component { this.handleChange = this.handleChange.bind( this ); this.handleMouseDown = this.handleMouseDown.bind( this ); this.handleMouseUp = this.handleMouseUp.bind( this ); + this.handleKeyDown = this.handleKeyDown.bind( this ); } componentWillUnmount() { @@ -109,18 +119,35 @@ export class Alpha extends Component { this.unbindEventListeners(); } - preventKeyEvents( event ) { - if ( event.keyCode === TAB ) { - return; - } - event.preventDefault(); - } - unbindEventListeners() { window.removeEventListener( 'mousemove', this.handleChange ); window.removeEventListener( 'mouseup', this.handleMouseUp ); } + handleKeyDown( event ) { + const { keyCode, shiftKey } = event; + const shortcuts = { + [ UP ]: () => this.increase( shiftKey ? 0.1 : 0.01 ), + [ RIGHT ]: () => this.increase( shiftKey ? 0.1 : 0.01 ), + [ PAGEUP ]: () => this.increase( 0.1 ), + [ END ]: () => this.increase( 1 ), + [ DOWN ]: () => this.decrease( shiftKey ? 0.1 : 0.01 ), + [ LEFT ]: () => this.decrease( shiftKey ? 0.1 : 0.01 ), + [ PAGEDOWN ]: () => this.decrease( 0.1 ), + [ HOME ]: () => this.decrease( 1 ), + }; + + for ( const code in shortcuts ) { + if ( code === String( keyCode ) ) { + shortcuts[ keyCode ](); + } + } + + if ( keyCode !== TAB ) { + event.preventDefault(); + } + } + render() { const { rgb } = this.props; const rgbString = `${ rgb.r },${ rgb.g },${ rgb.b }`; @@ -129,54 +156,37 @@ export class Alpha extends Component { }; const pointerLocation = { left: `${ rgb.a * 100 }%` }; - const shortcuts = { - up: () => this.increase(), - right: () => this.increase(), - 'shift+up': () => this.increase( 0.1 ), - 'shift+right': () => this.increase( 0.1 ), - pageup: () => this.increase( 0.1 ), - end: () => this.increase( 1 ), - down: () => this.decrease(), - left: () => this.decrease(), - 'shift+down': () => this.decrease( 0.1 ), - 'shift+left': () => this.decrease( 0.1 ), - pagedown: () => this.decrease( 0.1 ), - home: () => this.decrease( 1 ), - }; - return ( - -
+
+
+ { /* eslint-disable jsx-a11y/no-static-element-interactions */ } +
- { /* eslint-disable jsx-a11y/no-static-element-interactions */ } -
-
-
- { /* eslint-enable jsx-a11y/no-static-element-interactions */ }
- + { /* eslint-enable jsx-a11y/no-static-element-interactions */ } +
); } } diff --git a/packages/components/src/color-picker/hue.js b/packages/components/src/color-picker/hue.js index b454712555b5c..b2441f7214a76 100644 --- a/packages/components/src/color-picker/hue.js +++ b/packages/components/src/color-picker/hue.js @@ -36,13 +36,22 @@ import { noop } from 'lodash'; import { compose, pure, withInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; -import { TAB } from '@wordpress/keycodes'; +import { + TAB, + UP, + DOWN, + RIGHT, + LEFT, + PAGEUP, + PAGEDOWN, + HOME, + END, +} from '@wordpress/keycodes'; /** * Internal dependencies */ import { calculateHueChange } from './utils'; -import KeyboardShortcuts from '../keyboard-shortcuts'; import { VisuallyHidden } from '../visually-hidden'; export class Hue extends Component { @@ -55,6 +64,7 @@ export class Hue extends Component { this.handleChange = this.handleChange.bind( this ); this.handleMouseDown = this.handleMouseDown.bind( this ); this.handleMouseUp = this.handleMouseUp.bind( this ); + this.handleKeyDown = this.handleKeyDown.bind( this ); } componentWillUnmount() { @@ -107,76 +117,74 @@ export class Hue extends Component { this.unbindEventListeners(); } - preventKeyEvents( event ) { - if ( event.keyCode === TAB ) { - return; - } - event.preventDefault(); - } - unbindEventListeners() { window.removeEventListener( 'mousemove', this.handleChange ); window.removeEventListener( 'mouseup', this.handleMouseUp ); } + handleKeyDown( event ) { + const { keyCode, shiftKey } = event; + const shortcuts = { + [ UP ]: () => this.increase( shiftKey ? 10 : 1 ), + [ RIGHT ]: () => this.increase( shiftKey ? 10 : 1 ), + [ PAGEUP ]: () => this.increase( 10 ), + [ END ]: () => this.increase( 359 ), + [ DOWN ]: () => this.decrease( shiftKey ? 10 : 1 ), + [ LEFT ]: () => this.decrease( shiftKey ? 10 : 1 ), + [ PAGEDOWN ]: () => this.decrease( 10 ), + [ HOME ]: () => this.decrease( 359 ), + }; + + for ( const code in shortcuts ) { + if ( code === String( keyCode ) ) { + shortcuts[ keyCode ](); + } + } + + if ( keyCode !== TAB ) { + event.preventDefault(); + } + } + render() { const { hsl = {}, instanceId } = this.props; - const pointerLocation = { left: `${ ( hsl.h * 100 ) / 360 }%` }; - const shortcuts = { - up: () => this.increase(), - right: () => this.increase(), - 'shift+up': () => this.increase( 10 ), - 'shift+right': () => this.increase( 10 ), - pageup: () => this.increase( 10 ), - end: () => this.increase( 359 ), - down: () => this.decrease(), - left: () => this.decrease(), - 'shift+down': () => this.decrease( 10 ), - 'shift+left': () => this.decrease( 10 ), - pagedown: () => this.decrease( 10 ), - home: () => this.decrease( 359 ), - }; return ( - -
-
- { /* eslint-disable jsx-a11y/no-static-element-interactions */ } +
+
+ { /* eslint-disable jsx-a11y/no-static-element-interactions */ } +
+ -
- - { __( - 'Move the arrow left or right to change hue.' - ) } - -
- { /* eslint-enable jsx-a11y/no-static-element-interactions */ } + { __( 'Move the arrow left or right to change hue.' ) } +
- + { /* eslint-enable jsx-a11y/no-static-element-interactions */ } +
); } } diff --git a/packages/components/src/color-picker/saturation.js b/packages/components/src/color-picker/saturation.js index fa0604bb11379..56705dd0f35a4 100644 --- a/packages/components/src/color-picker/saturation.js +++ b/packages/components/src/color-picker/saturation.js @@ -35,7 +35,17 @@ import { clamp, noop, throttle } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; -import { TAB } from '@wordpress/keycodes'; +import { + TAB, + UP, + DOWN, + RIGHT, + LEFT, + PAGEUP, + PAGEDOWN, + HOME, + END, +} from '@wordpress/keycodes'; import { compose, pure, withInstanceId } from '@wordpress/compose'; /** @@ -43,7 +53,6 @@ import { compose, pure, withInstanceId } from '@wordpress/compose'; */ import { calculateSaturationChange } from './utils'; import Button from '../button'; -import KeyboardShortcuts from '../keyboard-shortcuts'; import { VisuallyHidden } from '../visually-hidden'; export class Saturation extends Component { @@ -60,6 +69,7 @@ export class Saturation extends Component { this.handleChange = this.handleChange.bind( this ); this.handleMouseDown = this.handleMouseDown.bind( this ); this.handleMouseUp = this.handleMouseUp.bind( this ); + this.handleKeyDown = this.handleKeyDown.bind( this ); } componentWillUnmount() { @@ -119,69 +129,70 @@ export class Saturation extends Component { this.unbindEventListeners(); } - preventKeyEvents( event ) { - if ( event.keyCode === TAB ) { - return; - } - event.preventDefault(); - } - unbindEventListeners() { window.removeEventListener( 'mousemove', this.handleChange ); window.removeEventListener( 'mouseup', this.handleMouseUp ); } + handleKeyDown( event ) { + const { keyCode, shiftKey } = event; + const shortcuts = { + [ UP ]: () => this.brighten( shiftKey ? 0.1 : 0.01 ), + [ PAGEUP ]: () => this.brighten( 1 ), + [ DOWN ]: () => this.brighten( shiftKey ? -0.1 : -0.01 ), + [ PAGEDOWN ]: () => this.brighten( -1 ), + [ RIGHT ]: () => this.saturate( shiftKey ? 0.1 : 0.01 ), + [ END ]: () => this.saturate( 1 ), + [ LEFT ]: () => this.saturate( shiftKey ? -0.1 : -0.01 ), + [ HOME ]: () => this.saturate( -1 ), + }; + + for ( const code in shortcuts ) { + if ( code === String( keyCode ) ) { + shortcuts[ keyCode ](); + } + } + + if ( keyCode !== TAB ) { + event.preventDefault(); + } + } + render() { const { hsv, hsl, instanceId } = this.props; const pointerLocation = { top: `${ -hsv.v + 100 }%`, left: `${ hsv.s }%`, }; - const shortcuts = { - up: () => this.brighten(), - 'shift+up': () => this.brighten( 0.1 ), - pageup: () => this.brighten( 1 ), - down: () => this.brighten( -0.01 ), - 'shift+down': () => this.brighten( -0.1 ), - pagedown: () => this.brighten( -1 ), - right: () => this.saturate(), - 'shift+right': () => this.saturate( 0.1 ), - end: () => this.saturate( 1 ), - left: () => this.saturate( -0.01 ), - 'shift+left': () => this.saturate( -0.1 ), - home: () => this.saturate( -1 ), - }; /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ return ( - -
+
+
+
- + { __( + 'Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.' + ) } + +
); /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */ } diff --git a/packages/keycodes/README.md b/packages/keycodes/README.md index defcc8fff3893..b4ea9697460d7 100644 --- a/packages/keycodes/README.md +++ b/packages/keycodes/README.md @@ -94,6 +94,10 @@ _Type_ Keycode for DOWN key. +### END + +Keycode for END key. + ### ENTER Keycode for ENTER key. @@ -106,6 +110,10 @@ Keycode for ESCAPE key. Keycode for F10 key. +### HOME + +Keycode for HOME key. + ### isKeyboardEvent An object that contains functions to check if a keyboard event matches a @@ -136,6 +144,14 @@ _Type_ - `WPModifierHandler< ( isApple: () => boolean ) => WPModifierPart[]>` +### PAGEDOWN + +Keycode for PAGEDOWN key. + +### PAGEUP + +Keycode for PAGEUP key. + ### rawShortcut An object that contains functions to get raw shortcuts. diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js index 6390a01f5e4db..27be7f90eafcb 100644 --- a/packages/keycodes/src/index.js +++ b/packages/keycodes/src/index.js @@ -69,6 +69,26 @@ export const ESCAPE = 27; */ export const SPACE = 32; +/** + * Keycode for PAGEUP key. + */ +export const PAGEUP = 33; + +/** + * Keycode for PAGEDOWN key. + */ +export const PAGEDOWN = 34; + +/** + * Keycode for END key. + */ +export const END = 35; + +/** + * Keycode for HOME key. + */ +export const HOME = 36; + /** * Keycode for LEFT key. */ From 56093f084f18a10ab7a5cfd6494f14bc950b4210 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 13 Sep 2021 13:03:20 +0300 Subject: [PATCH 2/2] Fix unit test snapshots --- .../test/__snapshots__/index.js.snap | 914 +++++++++--------- 1 file changed, 455 insertions(+), 459 deletions(-) diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap index 6137b1d80a4e7..e273ce7252781 100644 --- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap +++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap @@ -5,51 +5,51 @@ Snapshot Diff: - First value + Second value -@@ -11,38 +11,38 @@ - onTouchMove={[Function bound handleChange]} - onTouchStart={[Function bound handleChange]} - role="application" +@@ -10,38 +10,38 @@ + onTouchMove={[Function bound handleChange]} + onTouchStart={[Function bound handleChange]} + role="application" + style={ + Object { +- "background": "hsl(210,100%, 50%)", ++ "background": "hsl(0,100%, 50%)", + } + } + > +
+
+
@@ -693,60 +691,58 @@ exports[`ColorPicker should render color picker 1`] = `
-
+
+
-
-
-

+

- Move the arrow left or right to change hue. -

-
+ } + > + Move the arrow left or right to change hue. +