update requiresAriaLabel custom proptype and its usages (elastic#802)

* update requiresAriaLabel custom proptype and its usages * changelog
kqualters-elastic · May 8, 2018 · 91d4f0a · 91d4f0a
1 parent 8de9311
commit 91d4f0a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,7 +6,7 @@
 
 - Added aria-invalid labeling on `EuiFormRow` ([#777](https://github.com/elastic/eui/pull/799))
 - Added aria-live labeling for `EuiToasts` ([#777](https://github.com/elastic/eui/pull/777))
-- 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))
+- 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)) ([#802](https://github.com/elastic/eui/pull/802))
 - Ensure switches’ inputs are still hidden when `[disabled]` ([#778](https://github.com/elastic/eui/pull/778))
 - Made boolean matching in `EuiSearchBar` more exact so it doesn't match words starting with booleans, like "truest" or "offer" ([#776](https://github.com/elastic/eui/pull/776))
 

diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js
@@ -160,17 +160,17 @@ EuiBadge.propTypes = {
   /**
    * Aria label applied to the iconOnClick button
    */
-  iconOnClickAriaLabel: EuiPropTypes.requiresAriaLabel('iconOnClick', 'iconOnClickAriaLabel'),
+  iconOnClickAriaLabel: EuiPropTypes.requiresAriaLabel('iconOnClick'),
 
   /**
    * Will apply an onclick to the badge itself
    */
   onClick: PropTypes.func,
 
   /**
-   * Aria label applied to the iconOnClick button
+   * Aria label applied to the onClick button
    */
-  iconOnClickAriaLabel: EuiPropTypes.requiresAriaLabel('onClick', 'onClickAriaLabel'),
+  onClickAriaLabel: EuiPropTypes.requiresAriaLabel('onClick'),
 
   /**
    * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`.

diff --git a/src/utils/prop_types/requires_aria_label.js b/src/utils/prop_types/requires_aria_label.js
@@ -1,7 +1,19 @@
-export const requiresAriaLabel = (action, label) => {
+/**
+ * PropType validation to require an aria label if the associated function property is also present
+ *
+ * example:
+ * ExampleComponent.propTypes = {
+ *   onClick: PropTypes.func,
+ *   onClickAriaLabel: requiresAriaLabel('onClick')
+ * }
+ *
+ * this validator warns if ExampleComponent is passed an `onClick` prop with no `onClickAriaLabel`
+ */
+export const requiresAriaLabel = (action) => {
 
   const validator = (props, propName, componentName) => {
-    if (props[action] && !props[label]) {
+    // if the associated action property exists but the aria label property is missing
+    if (props[action] && !props[propName]) {
       return new Error(
         `Please provide an aria label to compliment your ${action} ` +
         `prop in ${componentName}`