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
carbon-design-system · Aug 4, 2023 · b7abe20 · b7abe20
1 parent f389dfa
commit b7abe20
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/...es/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/...act/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/...act/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
@@ -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}