From 01bddca24e8f148d4c455710e7c0df95ab846f5d Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Wed, 12 Feb 2020 12:04:34 -0600
Subject: [PATCH 1/4] fix(search): switch search role from datatable to search,
 add labeledby

---
 .../DataTable/TableToolbarSearch.js           |  1 -
 .../__snapshots__/DataTable-test.js.snap      | 74 ++++++-------------
 .../TableBatchAction-test.js.snap             | 11 +--
 .../TableToolbarSearch-test.js.snap           |  4 +-
 .../src/components/Search/Search-story.js     | 18 +++--
 .../react/src/components/Search/Search.js     |  7 +-
 6 files changed, 48 insertions(+), 67 deletions(-)

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
index ba735e9f8baa..bf2c81b742ec 100644
--- a/packages/react/src/components/DataTable/TableToolbarSearch.js
+++ b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -101,7 +101,6 @@ const TableToolbarSearch = ({
   return (
     <div
       tabIndex={expandedState ? '-1' : tabIndex}
-      role="search"
       ref={searchRef}
       onClick={event => onClick(event)}
       onFocus={event => handleExpand(event, true)}
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 5d65c824dfe5..7c5b43fa4457 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
@@ -2019,7 +2019,7 @@ exports[`DataTable should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
+                            viewBox="0 0 16 16"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -2034,17 +2034,12 @@ exports[`DataTable should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 32 32"
+                              viewBox="0 0 16 16"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
-                              />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
-                                data-icon-path="inner-path"
-                                fill="none"
+                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
                               />
                             </svg>
                           </Icon>
@@ -2091,7 +2086,7 @@ exports[`DataTable should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
+                            viewBox="0 0 16 16"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -2106,17 +2101,12 @@ exports[`DataTable should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 32 32"
+                              viewBox="0 0 16 16"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
-                              />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
-                                data-icon-path="inner-path"
-                                fill="none"
+                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
                               />
                             </svg>
                           </Icon>
@@ -2163,7 +2153,7 @@ exports[`DataTable should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
+                            viewBox="0 0 16 16"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -2178,17 +2168,12 @@ exports[`DataTable should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 32 32"
+                              viewBox="0 0 16 16"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
-                              />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
-                                data-icon-path="inner-path"
-                                fill="none"
+                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
                               />
                             </svg>
                           </Icon>
@@ -2245,7 +2230,6 @@ exports[`DataTable should render 1`] = `
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  role="search"
                   tabIndex="0"
                 >
                   <Search
@@ -2261,7 +2245,9 @@ exports[`DataTable should render 1`] = `
                     value=""
                   >
                     <div
+                      aria-labelledby="custom-id-search"
                       className="bx--search bx--search--sm"
+                      role="search"
                     >
                       <ForwardRef(Search16)
                         className="bx--search-magnifier"
@@ -2298,6 +2284,7 @@ exports[`DataTable should render 1`] = `
                       <label
                         className="bx--label"
                         htmlFor="custom-id"
+                        id="custom-id-search"
                       >
                         Filter table
                       </label>
@@ -3016,7 +3003,7 @@ exports[`DataTable sticky header should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
+                            viewBox="0 0 16 16"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -3031,17 +3018,12 @@ exports[`DataTable sticky header should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 32 32"
+                              viewBox="0 0 16 16"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
-                              />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
-                                data-icon-path="inner-path"
-                                fill="none"
+                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
                               />
                             </svg>
                           </Icon>
@@ -3088,7 +3070,7 @@ exports[`DataTable sticky header should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
+                            viewBox="0 0 16 16"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -3103,17 +3085,12 @@ exports[`DataTable sticky header should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 32 32"
+                              viewBox="0 0 16 16"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
-                              />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
-                                data-icon-path="inner-path"
-                                fill="none"
+                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
                               />
                             </svg>
                           </Icon>
@@ -3160,7 +3137,7 @@ exports[`DataTable sticky header should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
+                            viewBox="0 0 16 16"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -3175,17 +3152,12 @@ exports[`DataTable sticky header should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 32 32"
+                              viewBox="0 0 16 16"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
-                              />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
-                                data-icon-path="inner-path"
-                                fill="none"
+                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
                               />
                             </svg>
                           </Icon>
@@ -3242,7 +3214,6 @@ exports[`DataTable sticky header should render 1`] = `
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  role="search"
                   tabIndex="0"
                 >
                   <Search
@@ -3258,7 +3229,9 @@ exports[`DataTable sticky header should render 1`] = `
                     value=""
                   >
                     <div
+                      aria-labelledby="custom-id-search"
                       className="bx--search bx--search--sm"
+                      role="search"
                     >
                       <ForwardRef(Search16)
                         className="bx--search-magnifier"
@@ -3295,6 +3268,7 @@ exports[`DataTable sticky header should render 1`] = `
                       <label
                         className="bx--label"
                         htmlFor="custom-id"
+                        id="custom-id-search"
                       >
                         Filter table
                       </label>
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 6e139bc633cc..6fcfa03bbf0d 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
@@ -42,7 +42,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
           className="bx--btn__icon"
           height={16}
           preserveAspectRatio="xMidYMid meet"
-          viewBox="0 0 32 32"
+          viewBox="0 0 16 16"
           width={16}
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -59,17 +59,12 @@ exports[`DataTable.TableBatchAction should render 1`] = `
                 "willChange": "transform",
               }
             }
-            viewBox="0 0 32 32"
+            viewBox="0 0 16 16"
             width={16}
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
-            />
-            <path
-              d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
-              data-icon-path="inner-path"
-              fill="none"
+              d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
             />
           </svg>
         </Icon>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
index 2eccdb99d83f..cfb74f4268ff 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -14,7 +14,6 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
-    role="search"
     tabIndex="0"
   >
     <Search
@@ -31,7 +30,9 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
       value=""
     >
       <div
+        aria-labelledby="custom-id-search"
         className="bx--search bx--search--sm custom-class"
+        role="search"
       >
         <ForwardRef(Search16)
           className="bx--search-magnifier"
@@ -68,6 +69,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
         <label
           className="bx--label"
           htmlFor="custom-id"
+          id="custom-id-search"
         >
           Filter table
         </label>
diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js
index 3464be4862aa..cc9e42c2f5c3 100644
--- a/packages/react/src/components/Search/Search-story.js
+++ b/packages/react/src/components/Search/Search-story.js
@@ -40,15 +40,23 @@ const props = () => ({
 
 storiesOf('Search', module)
   .addDecorator(withKnobs)
-  .add('Default', () => <Search {...props()} id="search-1" />, {
-    info: {
-      text: `
+  .add(
+    'Default',
+    () => (
+      <div>
+        <Search {...props()} id="search-1" />
+      </div>
+    ),
+    {
+      info: {
+        text: `
             Search enables users to specify a word or a phrase to find particular relevant pieces of content
             without the use of navigation. Search can be used as the primary means of discovering content,
             or as a filter to aid the user in finding content.
           `,
-    },
-  })
+      },
+    }
+  )
   .add(
     '[Deprecated] custom buttons',
     () => (
diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
index 4f08defba927..9f224b867ee9 100644
--- a/packages/react/src/components/Search/Search.js
+++ b/packages/react/src/components/Search/Search.js
@@ -162,9 +162,12 @@ export default class Search extends Component {
     const CloseIconX = size === 'xl' ? Close20 : Close16;
 
     return (
-      <div className={searchClasses}>
+      <div
+        role="search"
+        aria-labelledby={id + '-search'}
+        className={searchClasses}>
         <Search16 className={`${prefix}--search-magnifier`} />
-        <label htmlFor={id} className={`${prefix}--label`}>
+        <label id={id + '-search'} htmlFor={id} className={`${prefix}--label`}>
           {labelText}
         </label>
         <input

From e26b7fe2b411280f83bb039f2684add451dafe15 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Wed, 12 Feb 2020 12:11:36 -0600
Subject: [PATCH 2/4] docs(search): remove unnecessary changes

---
 .../src/components/Search/Search-story.js      | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js
index cc9e42c2f5c3..3464be4862aa 100644
--- a/packages/react/src/components/Search/Search-story.js
+++ b/packages/react/src/components/Search/Search-story.js
@@ -40,23 +40,15 @@ const props = () => ({
 
 storiesOf('Search', module)
   .addDecorator(withKnobs)
-  .add(
-    'Default',
-    () => (
-      <div>
-        <Search {...props()} id="search-1" />
-      </div>
-    ),
-    {
-      info: {
-        text: `
+  .add('Default', () => <Search {...props()} id="search-1" />, {
+    info: {
+      text: `
             Search enables users to specify a word or a phrase to find particular relevant pieces of content
             without the use of navigation. Search can be used as the primary means of discovering content,
             or as a filter to aid the user in finding content.
           `,
-      },
-    }
-  )
+    },
+  })
   .add(
     '[Deprecated] custom buttons',
     () => (

From 8411f8fccb4334dfddbbeaea139d7a8bfd3d938b Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Wed, 12 Feb 2020 17:28:20 -0600
Subject: [PATCH 3/4] fix(search): add id variable

---
 packages/react/src/components/Search/Search.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
index 9f224b867ee9..5fea9810920c 100644
--- a/packages/react/src/components/Search/Search.js
+++ b/packages/react/src/components/Search/Search.js
@@ -161,13 +161,12 @@ export default class Search extends Component {
 
     const CloseIconX = size === 'xl' ? Close20 : Close16;
 
+    const searchId = `${id}-search`;
+
     return (
-      <div
-        role="search"
-        aria-labelledby={id + '-search'}
-        className={searchClasses}>
+      <div role="search" aria-labelledby={searchId} className={searchClasses}>
         <Search16 className={`${prefix}--search-magnifier`} />
-        <label id={id + '-search'} htmlFor={id} className={`${prefix}--label`}>
+        <label id={searchId} htmlFor={id} className={`${prefix}--label`}>
           {labelText}
         </label>
         <input

From 270caf8a3c95b20f1865a69a76eb39236bd08323 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Thu, 13 Feb 2020 13:08:24 -0600
Subject: [PATCH 4/4] fix(search): update snapshots

---
 .../__snapshots__/DataTable-test.js.snap      | 66 ++++++++++++++-----
 .../TableBatchAction-test.js.snap             | 11 +++-
 2 files changed, 56 insertions(+), 21 deletions(-)

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 7c5b43fa4457..8edca04c6577 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
@@ -2019,7 +2019,7 @@ exports[`DataTable should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 16 16"
+                            viewBox="0 0 32 32"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -2034,12 +2034,17 @@ exports[`DataTable should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 16 16"
+                              viewBox="0 0 32 32"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
+                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
+                              />
+                              <path
+                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                                data-icon-path="inner-path"
+                                fill="none"
                               />
                             </svg>
                           </Icon>
@@ -2086,7 +2091,7 @@ exports[`DataTable should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 16 16"
+                            viewBox="0 0 32 32"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -2101,12 +2106,17 @@ exports[`DataTable should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 16 16"
+                              viewBox="0 0 32 32"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
+                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
+                              />
+                              <path
+                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                                data-icon-path="inner-path"
+                                fill="none"
                               />
                             </svg>
                           </Icon>
@@ -2153,7 +2163,7 @@ exports[`DataTable should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 16 16"
+                            viewBox="0 0 32 32"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -2168,12 +2178,17 @@ exports[`DataTable should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 16 16"
+                              viewBox="0 0 32 32"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
+                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
+                              />
+                              <path
+                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                                data-icon-path="inner-path"
+                                fill="none"
                               />
                             </svg>
                           </Icon>
@@ -3003,7 +3018,7 @@ exports[`DataTable sticky header should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 16 16"
+                            viewBox="0 0 32 32"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -3018,12 +3033,17 @@ exports[`DataTable sticky header should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 16 16"
+                              viewBox="0 0 32 32"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
+                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
+                              />
+                              <path
+                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                                data-icon-path="inner-path"
+                                fill="none"
                               />
                             </svg>
                           </Icon>
@@ -3070,7 +3090,7 @@ exports[`DataTable sticky header should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 16 16"
+                            viewBox="0 0 32 32"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -3085,12 +3105,17 @@ exports[`DataTable sticky header should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 16 16"
+                              viewBox="0 0 32 32"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
+                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
+                              />
+                              <path
+                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                                data-icon-path="inner-path"
+                                fill="none"
                               />
                             </svg>
                           </Icon>
@@ -3137,7 +3162,7 @@ exports[`DataTable sticky header should render 1`] = `
                             className="bx--btn__icon"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 16 16"
+                            viewBox="0 0 32 32"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
@@ -3152,12 +3177,17 @@ exports[`DataTable sticky header should render 1`] = `
                                   "willChange": "transform",
                                 }
                               }
-                              viewBox="0 0 16 16"
+                              viewBox="0 0 32 32"
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
+                                d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
+                              />
+                              <path
+                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                                data-icon-path="inner-path"
+                                fill="none"
                               />
                             </svg>
                           </Icon>
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 6fcfa03bbf0d..6e139bc633cc 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
@@ -42,7 +42,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
           className="bx--btn__icon"
           height={16}
           preserveAspectRatio="xMidYMid meet"
-          viewBox="0 0 16 16"
+          viewBox="0 0 32 32"
           width={16}
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -59,12 +59,17 @@ exports[`DataTable.TableBatchAction should render 1`] = `
                 "willChange": "transform",
               }
             }
-            viewBox="0 0 16 16"
+            viewBox="0 0 32 32"
             width={16}
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.2,7-7S11.8,1,8,1z M12,9H9v3H7V9H4V7h3V4h2v3h3V9z"
+              d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
+            />
+            <path
+              d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+              data-icon-path="inner-path"
+              fill="none"
             />
           </svg>
         </Icon>