From b7abe20ab5c5b8d12a47a0e6e044d406723b24d1 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Fri, 4 Aug 2023 14:19:55 -0500
Subject: [PATCH] fix(datatable): remove toolbar search and menu from tab order
 (#14397)

* fix(datatable): remove toolbar search and menu from tab order when batch actions are open

* chore: update snaps
---
 .../DataTable/DataTable-test.avt.e2e.js       |  2 --
 .../__snapshots__/DataTable-test.js.snap      |  2 ++
 .../TableToolbarSearch-test.js.snap           |  1 +
 .../DataTable-dynamic-content.stories.js      | 20 ++++++++++++++++---
 .../react/src/components/Search/Search.tsx    |  2 +-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/e2e/components/DataTable/DataTable-test.avt.e2e.js b/e2e/components/DataTable/DataTable-test.avt.e2e.js
index 7259c55644d2..3756fdaf860e 100644
--- a/e2e/components/DataTable/DataTable-test.avt.e2e.js
+++ b/e2e/components/DataTable/DataTable-test.avt.e2e.js
@@ -154,8 +154,6 @@ test.describe('DataTable @avt', () => {
       await page.keyboard.press('Shift+Tab');
       await page.keyboard.press('Shift+Tab');
       await page.keyboard.press('Shift+Tab');
-      await page.keyboard.press('Shift+Tab');
-      await page.keyboard.press('Shift+Tab');
 
       await page
         .getByRole('heading', { name: 'Expandable row content' })
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 b52f35d08ff2..9b94f0ef8686 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
@@ -515,6 +515,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
             id="custom-id"
             placeholder="Filter table"
             role="searchbox"
+            tabindex="0"
             type="text"
             value=""
           />
@@ -941,6 +942,7 @@ exports[`DataTable renders as expected - Component API should render and match s
             id="custom-id"
             placeholder="Filter table"
             role="searchbox"
+            tabindex="0"
             type="text"
             value=""
           />
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 6eb7f7836dd1..920ba83afd66 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
@@ -40,6 +40,7 @@ exports[`TableToolbarSearch renders as expected - Component API should render 1`
       id="custom-id"
       placeholder="Filter table"
       role="searchbox"
+      tabindex="0"
       type="text"
       value=""
     />
diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
index 83185d03e76f..13c57dade2fd 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
@@ -154,8 +154,16 @@ export const Default = () => {
                     </TableBatchAction>
                   </TableBatchActions>
                   <TableToolbarContent>
-                    <TableToolbarSearch onChange={onInputChange} />
-                    <TableToolbarMenu>
+                    <TableToolbarSearch
+                      tabIndex={
+                        batchActionProps.shouldShowBatchActions ? -1 : 0
+                      }
+                      onChange={onInputChange}
+                    />
+                    <TableToolbarMenu
+                      tabIndex={
+                        batchActionProps.shouldShowBatchActions ? -1 : 0
+                      }>
                       <TableToolbarAction onClick={this.handleOnRowAdd}>
                         Add row
                       </TableToolbarAction>
@@ -328,8 +336,14 @@ export const Playground = (args) => {
                         action('TableToolbarSearch - onChange')(evt);
                         onInputChange(evt);
                       }}
+                      tabIndex={
+                        batchActionProps.shouldShowBatchActions ? -1 : 0
+                      }
                     />
-                    <TableToolbarMenu>
+                    <TableToolbarMenu
+                      tabIndex={
+                        batchActionProps.shouldShowBatchActions ? -1 : 0
+                      }>
                       <TableToolbarAction
                         onClick={(evt) => {
                           action('handleOnRowAdd')(evt);
diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx
index ad9e10bbaa14..cfb765b34bc8 100644
--- a/packages/react/src/components/Search/Search.tsx
+++ b/packages/react/src/components/Search/Search.tsx
@@ -243,7 +243,6 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(function Search(
         {labelText}
       </label>
       <input
-        {...rest}
         autoComplete={autoComplete}
         className={`${prefix}--search-input`}
         defaultValue={defaultValue}
@@ -257,6 +256,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(function Search(
         type={type}
         value={value}
         tabIndex={onExpand && !isExpanded ? -1 : undefined}
+        {...rest}
       />
       <button
         aria-label={closeButtonLabelText}