Accessibility/badge

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.46`.
+**Bug fixes**
+
+- Added aria labeling requirements for `EuiBadge` , as well as a generic prop_type function `requiresAriaLabel` in `utils` to check for it. ([#777](https://github.com/elastic/eui/pull/777))
 
 ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46)
 

src-docs/src/views/badge/badge_button.js

@@ -9,6 +9,7 @@ export default () => (
     <EuiBadge
       color="#333"
       onClick={() => window.alert('Badge clicked')}
+      onClickAriaLabel="Example of onclick event for the button"
     >
       onClick on badge itself
     </EuiBadge>
@@ -18,6 +19,7 @@ export default () => (
       iconSide="right"
       color="#333"
       iconOnClick={() => window.alert('Icon inside badge clicked')}
+      iconOnClickAriaLabel="Example of onclick event for icon within the button"
     >
       onClick on icon within badge
     </EuiBadge>

src/components/badge/badge.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { EuiPropTypes } from '../../utils';
 
 import { isColorDark, hexToRgb } from '../../services/color';
 import { EuiKeyboardAccessible } from '../accessibility';
@@ -37,6 +38,8 @@ export const EuiBadge = ({
   className,
   onClick,
   iconOnClick,
+  onClickAriaLabel,
+  iconOnClickAriaLabel,
   closeButtonProps,
   ...rest
 }) => {
@@ -71,7 +74,14 @@ export const EuiBadge = ({
     if (iconOnClick) {
       optionalIcon = (
         <EuiKeyboardAccessible>
-          <EuiIcon onClick={iconOnClick} type={iconType} size="s" className="euiBadge__icon" {...closeButtonProps} />
+          <EuiIcon
+            onClick={iconOnClick}
+            type={iconType}
+            size="s"
+            className="euiBadge__icon"
+            aria-label={iconOnClickAriaLabel}
+            {...closeButtonProps}
+          />
         </EuiKeyboardAccessible>
       );
 
@@ -88,6 +98,7 @@ export const EuiBadge = ({
         className={classes}
         style={optionalCustomStyles}
         onClick={onClick}
+        aria-label={onClickAriaLabel}
         {...rest}
       >
         <span className="euiBadge__content">
@@ -116,6 +127,8 @@ export const EuiBadge = ({
   }
 };
 
+
+
 function checkValidColor(props, propName, componentName) {
   const validHex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color);
   if (props.color && !validHex && !COLORS.includes(props.color)) {
@@ -144,11 +157,21 @@ EuiBadge.propTypes = {
    */
   iconOnClick: PropTypes.func,
 
+  /**
+   * Aria label applied to the iconOnClick button
+   */
+  iconOnClickAriaLabel: EuiPropTypes.requiresAriaLabel('iconOnClick', 'iconOnClickAriaLabel'),
+
   /**
    * Will apply an onclick to the badge itself
    */
   onClick: PropTypes.func,
 
+  /**
+   * Aria label applied to the iconOnClick button
+   */
+  iconOnClickAriaLabel: EuiPropTypes.requiresAriaLabel('onClick', 'onClickAriaLabel'),
+
   /**
    * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`.
    */

src/components/combo_box/combo_box_input/combo_box_pill.js

@@ -43,6 +43,7 @@ export class EuiComboBoxPill extends Component {
           className={classes}
           title={children}
           iconOnClick={this.onCloseButtonClick}
+          iconOnClickAriaLabel={`Remove ${children} from selection in this group`}
           iconType="cross"
           iconSide="right"
           color={color}

src/utils/prop_types/index.js

@@ -1,5 +1,7 @@
 import { is } from './is';
+import { requiresAriaLabel } from './requires_aria_label';
 
 export const EuiPropTypes = {
-  is
+  is,
+  requiresAriaLabel,
 };

src/utils/prop_types/requires_aria_label.js

@@ -0,0 +1,15 @@
+export const requiresAriaLabel = (action, label) => {
+
+  const validator = (props, propName, componentName) => {
+    if (props[action] && !props[label]) {
+      return new Error(
+        `Please provide an aria label to compliment your ${action} ` +
+        `prop in ${componentName}`
+      );
+    }
+
+    return null;
+  };
+
+  return validator;
+};