accessibility additions

elastic · May 23, 2018 · b51ad35 · b51ad35
1 parent ac883fd
commit b51ad35
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git 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={
-            <EuiColorPickerSwatch color={this.state.color} />
+            <EuiColorPickerSwatch
+              color={this.state.color}
+              aria-label="Select a new color"
+            />
           }
         />
       </EuiFormRow>

diff --git 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`}
         />
       </EuiFlexItem>
     ));
@@ -97,6 +98,13 @@ export class EuiColorPicker extends Component {
           className="euiColorPicker__panel"
           paddingSize="s"
         >
+          <EuiScreenReaderOnly>
+            <p aria-live="polite">
+              A popup with a range of selectable colors opened.
+              Tab forward to cycle through colors choices or press
+              escape to close this popup.
+            </p>
+          </EuiScreenReaderOnly>
           <EuiFlexGroup wrap responsive={false} gutterSize="s">
             {swatchButtons}
           </EuiFlexGroup>