diff --git a/src-docs/src/views/color_picker/custom_button.js b/src-docs/src/views/color_picker/custom_button.js index f194a33330e..3a0d56e86c4 100644 --- a/src-docs/src/views/color_picker/custom_button.js +++ b/src-docs/src/views/color_picker/custom_button.js @@ -41,7 +41,10 @@ export class CustomButton extends Component { color={this.state.color} isInvalid={hasErrors} button={ - + } /> diff --git a/src/components/color_picker/color_picker.js b/src/components/color_picker/color_picker.js index 6a3da37e63d..428edf9e24e 100644 --- a/src/components/color_picker/color_picker.js +++ b/src/components/color_picker/color_picker.js @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { EuiColorPickerSwatch } from './color_picker_swatch' +import { EuiScreenReaderOnly } from '../accessibility'; import { EuiFieldText } from '../form' import { EuiPanel } from '../panel' import { EuiOutsideClickDetector } from '../outside_click_detector' @@ -85,7 +86,7 @@ export class EuiColorPicker extends Component { className="euiColorPicker__swatchSelect" color={swatch} onClick={this.handleSwatchSelection.bind(this, swatch)} - aria-label={`Select ${color} as the color`} + aria-label={`Select ${swatch} as the color`} /> )); @@ -97,6 +98,13 @@ export class EuiColorPicker extends Component { className="euiColorPicker__panel" paddingSize="s" > + +

+ A popup with a range of selectable colors opened. + Tab forward to cycle through colors choices or press + escape to close this popup. +

+
{swatchButtons}