Skip to content

Commit

Permalink
Components: ColorPicker: replace global shortcut event handlers with …
Browse files Browse the repository at this point in the history 
…local ones (#34508)
  • Loading branch information
@ellatrix
ellatrix authored Sep 13, 2021
1 parent bceee46 commit 1d93095
Show file tree
Hide file tree
Showing 6 changed files with 682 additions and 621 deletions.
116 changes: 63 additions & 53 deletions packages/components/src/color-picker/alpha.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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() {
Expand Down Expand Up @@ -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 }`;
Expand All @@ -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 (
<KeyboardShortcuts shortcuts={ shortcuts }>
<div className="components-color-picker__alpha">
<div className="components-color-picker__alpha">
<div
className="components-color-picker__alpha-gradient"
style={ gradient }
/>
{ /* eslint-disable jsx-a11y/no-static-element-interactions */ }
<div
className="components-color-picker__alpha-bar"
ref={ this.container }
onMouseDown={ this.handleMouseDown }
onTouchMove={ this.handleChange }
onTouchStart={ this.handleChange }
>
<div
className="components-color-picker__alpha-gradient"
style={ gradient }
tabIndex="0"
role="slider"
aria-valuemax="1"
aria-valuemin="0"
aria-valuenow={ rgb.a }
aria-orientation="horizontal"
aria-label={ __(
'Alpha value, from 0 (transparent) to 1 (fully opaque).'
) }
className="components-color-picker__alpha-pointer"
style={ pointerLocation }
onKeyDown={ this.handleKeyDown }
/>
{ /* eslint-disable jsx-a11y/no-static-element-interactions */ }
<div
className="components-color-picker__alpha-bar"
ref={ this.container }
onMouseDown={ this.handleMouseDown }
onTouchMove={ this.handleChange }
onTouchStart={ this.handleChange }
>
<div
tabIndex="0"
role="slider"
aria-valuemax="1"
aria-valuemin="0"
aria-valuenow={ rgb.a }
aria-orientation="horizontal"
aria-label={ __(
'Alpha value, from 0 (transparent) to 1 (fully opaque).'
) }
className="components-color-picker__alpha-pointer"
style={ pointerLocation }
onKeyDown={ this.preventKeyEvents }
/>
</div>
{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }
</div>
</KeyboardShortcuts>
{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }
</div>
);
}
}
Expand Down
126 changes: 67 additions & 59 deletions packages/components/src/color-picker/hue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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() {
Expand Down Expand Up @@ -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 (
<KeyboardShortcuts shortcuts={ shortcuts }>
<div className="components-color-picker__hue">
<div className="components-color-picker__hue-gradient" />
{ /* eslint-disable jsx-a11y/no-static-element-interactions */ }
<div className="components-color-picker__hue">
<div className="components-color-picker__hue-gradient" />
{ /* eslint-disable jsx-a11y/no-static-element-interactions */ }
<div
className="components-color-picker__hue-bar"
ref={ this.container }
onMouseDown={ this.handleMouseDown }
onTouchMove={ this.handleChange }
onTouchStart={ this.handleChange }
>
<div
className="components-color-picker__hue-bar"
ref={ this.container }
onMouseDown={ this.handleMouseDown }
onTouchMove={ this.handleChange }
onTouchStart={ this.handleChange }
tabIndex="0"
role="slider"
aria-valuemax="1"
aria-valuemin="359"
aria-valuenow={ hsl.h }
aria-orientation="horizontal"
aria-label={ __(
'Hue value in degrees, from 0 to 359.'
) }
aria-describedby={ `components-color-picker__hue-description-${ instanceId }` }
className="components-color-picker__hue-pointer"
style={ pointerLocation }
onKeyDown={ this.handleKeyDown }
/>
<VisuallyHidden
as="p"
id={ `components-color-picker__hue-description-${ instanceId }` }
>
<div
tabIndex="0"
role="slider"
aria-valuemax="1"
aria-valuemin="359"
aria-valuenow={ hsl.h }
aria-orientation="horizontal"
aria-label={ __(
'Hue value in degrees, from 0 to 359.'
) }
aria-describedby={ `components-color-picker__hue-description-${ instanceId }` }
className="components-color-picker__hue-pointer"
style={ pointerLocation }
onKeyDown={ this.preventKeyEvents }
/>
<VisuallyHidden
as="p"
id={ `components-color-picker__hue-description-${ instanceId }` }
>
{ __(
'Move the arrow left or right to change hue.'
) }
</VisuallyHidden>
</div>
{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }
{ __( 'Move the arrow left or right to change hue.' ) }
</VisuallyHidden>
</div>
</KeyboardShortcuts>
{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }
</div>
);
}
}
Expand Down
Loading

0 comments on commit 1d93095

Please sign in to comment.