From 8abe3aebb2e83e882b3cfa92d78b4821abbec96c Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Tue, 30 Mar 2021 09:22:53 -0500
Subject: [PATCH] fix(TableToolbarSearch): allow screen reader navigation
 (#7986)

* refactor(data-table-action): specify background-color

* fix(TableToolbarSearch): remove toolbar action class

* refactor(data-table-action): use rem based calculation

* fix(TableToolbarSearch): remove toolbar search container

* chore: update snapshots

* fix(data-table-action): update spacing token
---
 .../data-table/_data-table-action.scss        | 171 +++-------
 .../DataTable/TableToolbarSearch.js           |  53 +--
 .../__snapshots__/DataTable-test.js.snap      | 308 +++++++++---------
 .../TableToolbarSearch-test.js.snap           | 153 +++++----
 4 files changed, 286 insertions(+), 399 deletions(-)

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
index 1d6e8d0f5192..7958d139ac31 100644
--- a/packages/components/src/components/data-table/_data-table-action.scss
+++ b/packages/components/src/components/data-table/_data-table-action.scss
@@ -23,7 +23,7 @@
     width: 100%;
     height: $spacing-09;
     overflow: hidden;
-    background: $ui-01;
+    background-color: $ui-01;
   }
 
   .#{$prefix}--toolbar-content {
@@ -63,90 +63,59 @@
     width: $spacing-09;
     height: $spacing-09;
     box-shadow: none;
-    transition: flex $transition--expansion $carbon--standard-easing;
+    cursor: pointer;
+    transition: width $transition--expansion $carbon--standard-easing,
+      background-color $duration--fast-02 motion(entrance, productive);
+
+    &:hover {
+      background-color: $hover-field;
+    }
   }
 
-  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search {
-    position: initial;
-    width: $spacing-09;
+  .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0;
   }
 
   .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier {
     left: 0;
     width: $spacing-09;
     height: $spacing-09;
     padding: $spacing-05;
-    cursor: pointer;
-    transition: background $duration--fast-02 motion(entrance, productive);
-    pointer-events: all;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search--disabled
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
     .#{$prefix}--search-magnifier {
-    background: $disabled-01;
+    background-color: $disabled-01;
     cursor: not-allowed;
     transition: background-color none;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
-    .#{$prefix}--search-magnifier:focus {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
-    .#{$prefix}--search-magnifier:hover {
-    background: $hover-field;
-  }
-
-  .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-disabled {
+  .#{$prefix}--toolbar-search-container-disabled {
     cursor: not-allowed;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search--disabled
-    .#{$prefix}--search-magnifier:hover {
-    background: $disabled-01;
-    cursor: not-allowed;
-    transition: background-color none;
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
     .#{$prefix}--label {
     visibility: hidden;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
-    .#{$prefix}--search-input {
-    height: 100%;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    visibility: hidden;
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
     .#{$prefix}--search-close {
     width: $spacing-09;
     height: $spacing-09;
 
     &::before {
-      top: 2px;
-      height: calc(100% - 4px);
+      top: rem(2px);
+      height: calc(100% - #{rem(4px)});
       background-color: $hover-ui;
     }
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search
     .#{$prefix}--search-close:focus::before {
     background-color: $focus;
   }
@@ -154,35 +123,22 @@
   //-------------------------------------------------
   //ACTIVE SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
-  .#{$prefix}--toolbar-search-container-active {
-    flex: auto;
-    transition: flex $duration--moderate-01 motion(standard, productive);
-  }
 
-  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search {
+  .#{$prefix}--toolbar-search-container-active.#{$prefix}--search {
     width: 100%;
   }
 
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--label,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--search-input {
-    padding: 0 $spacing-09;
-    visibility: inherit;
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
+    opacity: 1;
   }
 
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--search-input:focus {
-    @include focus-outline('outline');
-
-    box-shadow: inset 0 0 0 2px $focus;
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--label,
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
+    padding: 0 $spacing-09;
+    cursor: text;
   }
 
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-input:focus
     + .#{$prefix}--search-close {
     border: none;
@@ -191,22 +147,18 @@
   }
 
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-input:not(:placeholder-shown) {
-    background: $hover-field;
+    background-color: $hover-field;
     border: none;
   }
 
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier:focus,
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier:active,
   .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier:hover {
-    background: transparent;
+    background-color: transparent;
     border: none;
     outline: none;
   }
@@ -217,12 +169,8 @@
   .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close,
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search-close:hover,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--search-close,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search
-    .#{$prefix}--search-close:hover {
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close,
+  .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-close:hover {
     background-color: transparent;
     border: none;
   }
@@ -258,11 +206,11 @@
   }
 
   .#{$prefix}--toolbar-action:hover:not([disabled]) {
-    background: $hover-field;
+    background-color: $hover-field;
   }
 
   .#{$prefix}--toolbar-action:hover[aria-expanded='true'] {
-    background: $ui-01;
+    background-color: $ui-01;
   }
 
   .#{$prefix}--toolbar-action[disabled] {
@@ -325,43 +273,34 @@
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-magnifier {
     left: $spacing-05;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
-    .#{$prefix}--search-input {
+  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
     height: $spacing-09;
     padding: 0 $spacing-09;
     border: none;
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-input:focus:not([disabled]) {
     @include focus-outline('outline');
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-input:hover:not([disabled]) {
-    background: $hover-field;
+    background-color: $hover-field;
   }
 
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-input:active:not([disabled]),
   .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
     .#{$prefix}--search-input:not(:placeholder-shown) {
-    background: $hover-field;
+    background-color: $hover-field;
   }
 
-  .#{$prefix}--toolbar-search-container-persistent
-    .#{$prefix}--search
-    .#{$prefix}--search-close {
+  .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
     width: $spacing-09;
     height: $spacing-09;
   }
@@ -514,30 +453,20 @@
       height: rem(32px);
     }
 
-    .#{$prefix}--toolbar-search-container-expandable
-      .#{$prefix}--search
-      .#{$prefix}--search-input,
-    .#{$prefix}--toolbar-search-container-persistent
-      .#{$prefix}--search
-      .#{$prefix}--search-input {
+    .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input,
+    .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input {
       height: rem(32px);
     }
 
-    .#{$prefix}--toolbar-search-container-expandable
-      .#{$prefix}--search
-      .#{$prefix}--search-close,
-    .#{$prefix}--toolbar-search-container-persistent
-      .#{$prefix}--search
-      .#{$prefix}--search-close {
+    .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close,
+    .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close {
       width: rem(32px);
       height: rem(32px);
     }
 
     .#{$prefix}--toolbar-search-container-expandable
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier,
     .#{$prefix}--toolbar-search-container-persistent
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier {
       width: rem(32px);
       height: rem(32px);
@@ -565,46 +494,38 @@
       transition: flex 175ms $carbon--standard-easing;
     }
 
-    .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
-      .#{$prefix}--search-input {
+    .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input {
       visibility: inherit;
     }
 
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-input:focus {
       @include focus-outline('outline');
 
-      background: $hover-field;
+      background-color: $hover-field;
     }
 
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-input:active,
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-input:not(:placeholder-shown) {
-      background: $hover-field;
+      background-color: $hover-field;
     }
 
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier:focus,
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier:active,
     .#{$prefix}--toolbar-search-container-active
-      .#{$prefix}--search
       .#{$prefix}--search-magnifier:hover {
       @include focus-outline('reset');
 
-      background: transparent;
+      background-color: transparent;
     }
   }
 
   .#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
-    background: transparent;
+    background-color: transparent;
   }
 
   //-------------------------------------------------
diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
index f09031dc3226..9bb8c90d849f 100644
--- a/packages/react/src/components/DataTable/TableToolbarSearch.js
+++ b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -38,7 +38,6 @@ const TableToolbarSearch = ({
   persistent,
   persistant,
   id,
-  tabIndex,
   ...rest
 }) => {
   const { current: controlled } = useRef(expandedProp !== undefined);
@@ -46,7 +45,6 @@ const TableToolbarSearch = ({
     defaultExpanded || defaultValue
   );
   const expanded = controlled ? expandedProp : expandedState;
-  const searchRef = useRef(null);
   const [value, setValue] = useState(defaultValue || '');
   const uniqueId = useMemo(getInstanceId, []);
 
@@ -69,9 +67,8 @@ const TableToolbarSearch = ({
     []
   );
 
-  const searchContainerClasses = cx({
+  const searchClasses = cx(className, {
     [searchContainerClass]: searchContainerClass,
-    [`${prefix}--toolbar-action`]: true,
     [`${prefix}--toolbar-search-container-active`]: expanded,
     [`${prefix}--toolbar-search-container-disabled`]: disabled,
     [`${prefix}--toolbar-search-container-expandable`]:
@@ -84,9 +81,6 @@ const TableToolbarSearch = ({
     if (!disabled) {
       if (!controlled && (!persistent || (!persistent && !persistant))) {
         setExpandedState(value);
-        if (value && !expanded) {
-          setFocusTarget(searchRef);
-        }
       }
       if (onExpand) {
         onExpand(event, value);
@@ -94,10 +88,6 @@ const TableToolbarSearch = ({
     }
   };
 
-  const onClick = (e) => {
-    handleExpand(e, true);
-  };
-
   const onChange = (e) => {
     setValue(e.target.value);
     if (onChangeProp) {
@@ -105,35 +95,24 @@ const TableToolbarSearch = ({
     }
   };
 
-  const searchExpanded = expanded || persistent;
-
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div
-      tabIndex={searchExpanded || disabled ? '-1' : tabIndex}
-      ref={searchRef}
-      onKeyDown={(event) => onClick(event)}
-      onClick={(event) => onClick(event)}
+    <Search
+      disabled={disabled}
+      size="sm"
+      className={searchClasses}
+      value={value}
+      id={typeof id !== 'undefined' ? id : uniqueId.toString()}
+      labelText={labelText || t('carbon.table.toolbar.search.label')}
+      placeholder={
+        placeHolderText ||
+        placeholder ||
+        t('carbon.table.toolbar.search.placeholder')
+      }
+      onChange={onChange}
       onFocus={(event) => handleExpand(event, true)}
       onBlur={(event) => !value && handleExpand(event, false)}
-      className={searchContainerClasses}>
-      <Search
-        disabled={disabled}
-        size="sm"
-        tabIndex={searchExpanded ? tabIndex : '-1'}
-        className={className}
-        value={value}
-        id={typeof id !== 'undefined' ? id : uniqueId.toString()}
-        labelText={labelText || t('carbon.table.toolbar.search.label')}
-        placeholder={
-          placeHolderText ||
-          placeholder ||
-          t('carbon.table.toolbar.search.placeholder')
-        }
-        onChange={onChange}
-        {...rest}
-      />
-    </div>
+      {...rest}
+    />
   );
 };
 
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 538983cbb103..e6bf3aeb0b12 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
@@ -2306,113 +2306,109 @@ exports[`DataTable should render 1`] = `
                 tabIndex="0"
                 translateWithId={[Function]}
               >
-                <div
-                  className="bx--toolbar-action bx--toolbar-search-container-persistent"
+                <Search
+                  className="bx--toolbar-search-container-persistent"
+                  closeButtonLabelText="Clear search input"
+                  id="custom-id"
+                  labelText="Filter table"
                   onBlur={[Function]}
-                  onClick={[Function]}
+                  onChange={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  tabIndex="-1"
+                  placeholder="Filter table"
+                  size="sm"
+                  tabIndex="0"
+                  type="text"
+                  value=""
                 >
-                  <Search
-                    closeButtonLabelText="Clear search input"
-                    id="custom-id"
-                    labelText="Filter table"
-                    onChange={[Function]}
-                    placeholder="Filter table"
-                    size="sm"
-                    tabIndex="0"
-                    type="text"
-                    value=""
+                  <div
+                    aria-labelledby="custom-id-search"
+                    className="bx--search bx--search--sm bx--toolbar-search-container-persistent"
+                    role="search"
                   >
-                    <div
-                      aria-labelledby="custom-id-search"
-                      className="bx--search bx--search--sm"
-                      role="search"
+                    <ForwardRef(Search16)
+                      className="bx--search-magnifier"
                     >
-                      <ForwardRef(Search16)
+                      <Icon
                         className="bx--search-magnifier"
+                        fill="currentColor"
+                        height={16}
+                        preserveAspectRatio="xMidYMid meet"
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <Icon
+                        <svg
+                          aria-hidden={true}
                           className="bx--search-magnifier"
                           fill="currentColor"
+                          focusable="false"
                           height={16}
                           preserveAspectRatio="xMidYMid meet"
                           viewBox="0 0 16 16"
                           width={16}
                           xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+                          />
+                        </svg>
+                      </Icon>
+                    </ForwardRef(Search16)>
+                    <label
+                      className="bx--label"
+                      htmlFor="custom-id"
+                      id="custom-id-search"
+                    >
+                      Filter table
+                    </label>
+                    <input
+                      autoComplete="off"
+                      className="bx--search-input"
+                      id="custom-id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      placeholder="Filter table"
+                      role="searchbox"
+                      tabIndex="0"
+                      type="text"
+                      value=""
+                    />
+                    <button
+                      aria-label="Clear search input"
+                      className="bx--search-close bx--search-close--hidden"
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <ForwardRef(Close16)>
+                        <Icon
+                          fill="currentColor"
+                          height={16}
+                          preserveAspectRatio="xMidYMid meet"
+                          viewBox="0 0 32 32"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
                         >
                           <svg
                             aria-hidden={true}
-                            className="bx--search-magnifier"
                             fill="currentColor"
                             focusable="false"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 16 16"
+                            viewBox="0 0 32 32"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
                             />
                           </svg>
                         </Icon>
-                      </ForwardRef(Search16)>
-                      <label
-                        className="bx--label"
-                        htmlFor="custom-id"
-                        id="custom-id-search"
-                      >
-                        Filter table
-                      </label>
-                      <input
-                        autoComplete="off"
-                        className="bx--search-input"
-                        id="custom-id"
-                        onChange={[Function]}
-                        onKeyDown={[Function]}
-                        placeholder="Filter table"
-                        role="searchbox"
-                        tabIndex="0"
-                        type="text"
-                        value=""
-                      />
-                      <button
-                        aria-label="Clear search input"
-                        className="bx--search-close bx--search-close--hidden"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <ForwardRef(Close16)>
-                          <Icon
-                            fill="currentColor"
-                            height={16}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={16}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Close16)>
-                      </button>
-                    </div>
-                  </Search>
-                </div>
+                      </ForwardRef(Close16)>
+                    </button>
+                  </div>
+                </Search>
               </TableToolbarSearch>
               <TableToolbarMenu
                 iconDescription="Settings"
@@ -3337,113 +3333,109 @@ exports[`DataTable sticky header should render 1`] = `
                 tabIndex="0"
                 translateWithId={[Function]}
               >
-                <div
-                  className="bx--toolbar-action bx--toolbar-search-container-persistent"
+                <Search
+                  className="bx--toolbar-search-container-persistent"
+                  closeButtonLabelText="Clear search input"
+                  id="custom-id"
+                  labelText="Filter table"
                   onBlur={[Function]}
-                  onClick={[Function]}
+                  onChange={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  tabIndex="-1"
+                  placeholder="Filter table"
+                  size="sm"
+                  tabIndex="0"
+                  type="text"
+                  value=""
                 >
-                  <Search
-                    closeButtonLabelText="Clear search input"
-                    id="custom-id"
-                    labelText="Filter table"
-                    onChange={[Function]}
-                    placeholder="Filter table"
-                    size="sm"
-                    tabIndex="0"
-                    type="text"
-                    value=""
+                  <div
+                    aria-labelledby="custom-id-search"
+                    className="bx--search bx--search--sm bx--toolbar-search-container-persistent"
+                    role="search"
                   >
-                    <div
-                      aria-labelledby="custom-id-search"
-                      className="bx--search bx--search--sm"
-                      role="search"
+                    <ForwardRef(Search16)
+                      className="bx--search-magnifier"
                     >
-                      <ForwardRef(Search16)
+                      <Icon
                         className="bx--search-magnifier"
+                        fill="currentColor"
+                        height={16}
+                        preserveAspectRatio="xMidYMid meet"
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <Icon
+                        <svg
+                          aria-hidden={true}
                           className="bx--search-magnifier"
                           fill="currentColor"
+                          focusable="false"
                           height={16}
                           preserveAspectRatio="xMidYMid meet"
                           viewBox="0 0 16 16"
                           width={16}
                           xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+                          />
+                        </svg>
+                      </Icon>
+                    </ForwardRef(Search16)>
+                    <label
+                      className="bx--label"
+                      htmlFor="custom-id"
+                      id="custom-id-search"
+                    >
+                      Filter table
+                    </label>
+                    <input
+                      autoComplete="off"
+                      className="bx--search-input"
+                      id="custom-id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      placeholder="Filter table"
+                      role="searchbox"
+                      tabIndex="0"
+                      type="text"
+                      value=""
+                    />
+                    <button
+                      aria-label="Clear search input"
+                      className="bx--search-close bx--search-close--hidden"
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <ForwardRef(Close16)>
+                        <Icon
+                          fill="currentColor"
+                          height={16}
+                          preserveAspectRatio="xMidYMid meet"
+                          viewBox="0 0 32 32"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
                         >
                           <svg
                             aria-hidden={true}
-                            className="bx--search-magnifier"
                             fill="currentColor"
                             focusable="false"
                             height={16}
                             preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 16 16"
+                            viewBox="0 0 32 32"
                             width={16}
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
                             />
                           </svg>
                         </Icon>
-                      </ForwardRef(Search16)>
-                      <label
-                        className="bx--label"
-                        htmlFor="custom-id"
-                        id="custom-id-search"
-                      >
-                        Filter table
-                      </label>
-                      <input
-                        autoComplete="off"
-                        className="bx--search-input"
-                        id="custom-id"
-                        onChange={[Function]}
-                        onKeyDown={[Function]}
-                        placeholder="Filter table"
-                        role="searchbox"
-                        tabIndex="0"
-                        type="text"
-                        value=""
-                      />
-                      <button
-                        aria-label="Clear search input"
-                        className="bx--search-close bx--search-close--hidden"
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        <ForwardRef(Close16)>
-                          <Icon
-                            fill="currentColor"
-                            height={16}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={16}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Close16)>
-                      </button>
-                    </div>
-                  </Search>
-                </div>
+                      </ForwardRef(Close16)>
+                    </button>
+                  </div>
+                </Search>
               </TableToolbarSearch>
               <TableToolbarMenu
                 iconDescription="Settings"
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 1dce92a5387b..172b070be20d 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
@@ -9,113 +9,108 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
   tabIndex="0"
   translateWithId={[Function]}
 >
-  <div
-    className="bx--toolbar-action bx--toolbar-search-container-expandable"
+  <Search
+    className="custom-class bx--toolbar-search-container-expandable"
+    closeButtonLabelText="Clear search input"
+    id="custom-id"
+    labelText="Filter table"
     onBlur={[Function]}
-    onClick={[Function]}
+    onChange={[Function]}
     onFocus={[Function]}
-    onKeyDown={[Function]}
+    placeholder="Filter table"
+    size="sm"
     tabIndex="0"
+    type="text"
+    value=""
   >
-    <Search
-      className="custom-class"
-      closeButtonLabelText="Clear search input"
-      id="custom-id"
-      labelText="Filter table"
-      onChange={[Function]}
-      placeholder="Filter table"
-      size="sm"
-      tabIndex="-1"
-      type="text"
-      value=""
+    <div
+      aria-labelledby="custom-id-search"
+      className="bx--search bx--search--sm custom-class bx--toolbar-search-container-expandable"
+      role="search"
     >
-      <div
-        aria-labelledby="custom-id-search"
-        className="bx--search bx--search--sm custom-class"
-        role="search"
+      <ForwardRef(Search16)
+        className="bx--search-magnifier"
       >
-        <ForwardRef(Search16)
+        <Icon
           className="bx--search-magnifier"
+          fill="currentColor"
+          height={16}
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <Icon
+          <svg
+            aria-hidden={true}
             className="bx--search-magnifier"
             fill="currentColor"
+            focusable="false"
             height={16}
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 16 16"
             width={16}
             xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+            />
+          </svg>
+        </Icon>
+      </ForwardRef(Search16)>
+      <label
+        className="bx--label"
+        htmlFor="custom-id"
+        id="custom-id-search"
+      >
+        Filter table
+      </label>
+      <input
+        autoComplete="off"
+        className="bx--search-input"
+        id="custom-id"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Filter table"
+        role="searchbox"
+        tabIndex="0"
+        type="text"
+        value=""
+      />
+      <button
+        aria-label="Clear search input"
+        className="bx--search-close bx--search-close--hidden"
+        onClick={[Function]}
+        type="button"
+      >
+        <ForwardRef(Close16)>
+          <Icon
+            fill="currentColor"
+            height={16}
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 32 32"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
           >
             <svg
               aria-hidden={true}
-              className="bx--search-magnifier"
               fill="currentColor"
               focusable="false"
               height={16}
               preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 16 16"
+              viewBox="0 0 32 32"
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
+                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
               />
             </svg>
           </Icon>
-        </ForwardRef(Search16)>
-        <label
-          className="bx--label"
-          htmlFor="custom-id"
-          id="custom-id-search"
-        >
-          Filter table
-        </label>
-        <input
-          autoComplete="off"
-          className="bx--search-input"
-          id="custom-id"
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          placeholder="Filter table"
-          role="searchbox"
-          tabIndex="-1"
-          type="text"
-          value=""
-        />
-        <button
-          aria-label="Clear search input"
-          className="bx--search-close bx--search-close--hidden"
-          onClick={[Function]}
-          type="button"
-        >
-          <ForwardRef(Close16)>
-            <Icon
-              fill="currentColor"
-              height={16}
-              preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 32 32"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <svg
-                aria-hidden={true}
-                fill="currentColor"
-                focusable="false"
-                height={16}
-                preserveAspectRatio="xMidYMid meet"
-                viewBox="0 0 32 32"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                />
-              </svg>
-            </Icon>
-          </ForwardRef(Close16)>
-        </button>
-      </div>
-    </Search>
-  </div>
+        </ForwardRef(Close16)>
+      </button>
+    </div>
+  </Search>
 </TableToolbarSearch>
 `;