From 765e7ece04b46b4d517c8b7c534c0e67212037b6 Mon Sep 17 00:00:00 2001
From: Jen Downs <hello@jendowns.com>
Date: Mon, 9 Sep 2019 21:11:43 -0500
Subject: [PATCH] fix(table-batch-action): remove default iconDescription, add
 proptype check, update stories (#3928)

---
 .../components/DataTable/TableBatchAction.js  | 18 ++++++++++---
 .../__snapshots__/DataTable-test.js.snap      | 27 +++----------------
 .../TableBatchAction-test.js.snap             |  8 +-----
 .../DataTable/stories/with-batch-actions.js   |  3 ---
 4 files changed, 19 insertions(+), 37 deletions(-)

diff --git a/packages/react/src/components/DataTable/TableBatchAction.js b/packages/react/src/components/DataTable/TableBatchAction.js
index 347aee29c8cc..9fbb06ed21bb 100644
--- a/packages/react/src/components/DataTable/TableBatchAction.js
+++ b/packages/react/src/components/DataTable/TableBatchAction.js
@@ -14,9 +14,22 @@ const TableBatchAction = props => <Button {...props} />;
 
 TableBatchAction.propTypes = {
   /**
-   * Provide a text description for the icon in the button
+   * Specify if the button is an icon-only button
    */
-  iconDescription: PropTypes.string.isRequired,
+  hasIconOnly: PropTypes.bool,
+
+  /**
+   * If specifying the `renderIcon` prop, provide a description for that icon that can
+   * be read by screen readers
+   */
+  iconDescription: props => {
+    if (props.renderIcon && !props.children && !props.iconDescription) {
+      return new Error(
+        'renderIcon property specified without also providing an iconDescription property.'
+      );
+    }
+    return undefined;
+  },
 
   /**
    * Optional function to render your own icon in the underlying button
@@ -25,7 +38,6 @@ TableBatchAction.propTypes = {
 };
 
 TableBatchAction.defaultProps = {
-  iconDescription: 'Add',
   renderIcon: iconAddSolid,
 };
 
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 0fab26769346..a60363f67f20 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1764,7 +1764,6 @@ exports[`DataTable should render 1`] = `
                 translateWithId={[Function]}
               >
                 <TableBatchAction
-                  iconDescription="Add"
                   onClick={[MockFunction]}
                   renderIcon={
                     Object {
@@ -1776,7 +1775,6 @@ exports[`DataTable should render 1`] = `
                   Ghost
                 </TableBatchAction>
                 <TableBatchAction
-                  iconDescription="Add"
                   onClick={[MockFunction]}
                   renderIcon={
                     Object {
@@ -1788,7 +1786,6 @@ exports[`DataTable should render 1`] = `
                   Ghost
                 </TableBatchAction>
                 <TableBatchAction
-                  iconDescription="Add"
                   onClick={[MockFunction]}
                   renderIcon={
                     Object {
@@ -1965,7 +1962,6 @@ exports[`DataTable should render 1`] = `
                   className="bx--action-list"
                 >
                   <TableBatchAction
-                    iconDescription="Add"
                     onClick={[MockFunction]}
                     renderIcon={
                       Object {
@@ -1976,7 +1972,6 @@ exports[`DataTable should render 1`] = `
                   >
                     <ForwardRef(Button)
                       disabled={false}
-                      iconDescription="Add"
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -1998,12 +1993,10 @@ exports[`DataTable should render 1`] = `
                         Ghost
                         <ForwardRef(AddFilled16)
                           aria-hidden="true"
-                          aria-label="Add"
                           className="bx--btn__icon"
                         >
                           <Icon
                             aria-hidden="true"
-                            aria-label="Add"
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
@@ -2012,13 +2005,11 @@ exports[`DataTable should render 1`] = `
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <svg
-                              aria-hidden="true"
-                              aria-label="Add"
+                              aria-hidden={true}
                               className="bx--btn__icon"
                               focusable="false"
                               height={16}
                               preserveAspectRatio="xMidYMid meet"
-                              role="img"
                               style={
                                 Object {
                                   "willChange": "transform",
@@ -2038,7 +2029,6 @@ exports[`DataTable should render 1`] = `
                     </ForwardRef(Button)>
                   </TableBatchAction>
                   <TableBatchAction
-                    iconDescription="Add"
                     onClick={[MockFunction]}
                     renderIcon={
                       Object {
@@ -2049,7 +2039,6 @@ exports[`DataTable should render 1`] = `
                   >
                     <ForwardRef(Button)
                       disabled={false}
-                      iconDescription="Add"
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -2071,12 +2060,10 @@ exports[`DataTable should render 1`] = `
                         Ghost
                         <ForwardRef(AddFilled16)
                           aria-hidden="true"
-                          aria-label="Add"
                           className="bx--btn__icon"
                         >
                           <Icon
                             aria-hidden="true"
-                            aria-label="Add"
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
@@ -2085,13 +2072,11 @@ exports[`DataTable should render 1`] = `
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <svg
-                              aria-hidden="true"
-                              aria-label="Add"
+                              aria-hidden={true}
                               className="bx--btn__icon"
                               focusable="false"
                               height={16}
                               preserveAspectRatio="xMidYMid meet"
-                              role="img"
                               style={
                                 Object {
                                   "willChange": "transform",
@@ -2111,7 +2096,6 @@ exports[`DataTable should render 1`] = `
                     </ForwardRef(Button)>
                   </TableBatchAction>
                   <TableBatchAction
-                    iconDescription="Add"
                     onClick={[MockFunction]}
                     renderIcon={
                       Object {
@@ -2122,7 +2106,6 @@ exports[`DataTable should render 1`] = `
                   >
                     <ForwardRef(Button)
                       disabled={false}
-                      iconDescription="Add"
                       kind="primary"
                       onClick={[MockFunction]}
                       renderIcon={
@@ -2144,12 +2127,10 @@ exports[`DataTable should render 1`] = `
                         Ghost
                         <ForwardRef(AddFilled16)
                           aria-hidden="true"
-                          aria-label="Add"
                           className="bx--btn__icon"
                         >
                           <Icon
                             aria-hidden="true"
-                            aria-label="Add"
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
@@ -2158,13 +2139,11 @@ exports[`DataTable should render 1`] = `
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <svg
-                              aria-hidden="true"
-                              aria-label="Add"
+                              aria-hidden={true}
                               className="bx--btn__icon"
                               focusable="false"
                               height={16}
                               preserveAspectRatio="xMidYMid meet"
-                              role="img"
                               style={
                                 Object {
                                   "willChange": "transform",
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
index 6027b4b33056..b55e669258ff 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -3,7 +3,6 @@
 exports[`DataTable.TableBatchAction should render 1`] = `
 <TableBatchAction
   className="custom-class"
-  iconDescription="Add"
   renderIcon={
     Object {
       "$$typeof": Symbol(react.forward_ref),
@@ -14,7 +13,6 @@ exports[`DataTable.TableBatchAction should render 1`] = `
   <ForwardRef(Button)
     className="custom-class"
     disabled={false}
-    iconDescription="Add"
     kind="primary"
     renderIcon={
       Object {
@@ -33,12 +31,10 @@ exports[`DataTable.TableBatchAction should render 1`] = `
     >
       <ForwardRef(AddFilled16)
         aria-hidden="true"
-        aria-label="Add"
         className="bx--btn__icon"
       >
         <Icon
           aria-hidden="true"
-          aria-label="Add"
           className="bx--btn__icon"
           height={16}
           preserveAspectRatio="xMidYMid meet"
@@ -47,13 +43,11 @@ exports[`DataTable.TableBatchAction should render 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <svg
-            aria-hidden="true"
-            aria-label="Add"
+            aria-hidden={true}
             className="bx--btn__icon"
             focusable="false"
             height={16}
             preserveAspectRatio="xMidYMid meet"
-            role="img"
             style={
               Object {
                 "willChange": "transform",
diff --git a/packages/react/src/components/DataTable/stories/with-batch-actions.js b/packages/react/src/components/DataTable/stories/with-batch-actions.js
index 42847752876b..0f6a301004e4 100644
--- a/packages/react/src/components/DataTable/stories/with-batch-actions.js
+++ b/packages/react/src/components/DataTable/stories/with-batch-actions.js
@@ -56,19 +56,16 @@ export default props => (
           <TableBatchActions {...getBatchActionProps()}>
             <TableBatchAction
               renderIcon={Delete}
-              iconDescription="Delete the selected rows"
               onClick={batchActionClick(selectedRows)}>
               Delete
             </TableBatchAction>
             <TableBatchAction
               renderIcon={Save}
-              iconDescription="Save the selected rows"
               onClick={batchActionClick(selectedRows)}>
               Save
             </TableBatchAction>
             <TableBatchAction
               renderIcon={Download}
-              iconDescription="Download the selected rows"
               onClick={batchActionClick(selectedRows)}>
               Download
             </TableBatchAction>