fix(TableBatchActions): ensure hidden action bar un-focusable (#5081)

This change prevents hidden table batch action bar contents from being focused. Fixes #5049.
carbon-design-system · Jan 23, 2020 · b994c9a · b994c9a
1 parent d8aa52c
commit b994c9a
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 10 deletions.
diff --git a/packages/react/src/components/DataTable/TableBatchActions.js b/packages/react/src/components/DataTable/TableBatchActions.js
@@ -50,6 +50,7 @@ const TableBatchActions = ({
         {children}
         <Button
           className={`${prefix}--batch-summary__cancel`}
+          tabIndex={shouldShowBatchActions ? 0 : -1}
           onClick={onCancel}>
           {t('carbon.table.batch.cancel')}
         </Button>

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -36,6 +36,7 @@ const TableToolbarSearch = ({
   persistent,
   persistant,
   id,
+  tabIndex,
   ...rest
 }) => {
   const { current: controlled } = useRef(expandedProp !== undefined);
@@ -79,7 +80,7 @@ const TableToolbarSearch = ({
 
   return (
     <div
-      tabIndex={expandedState ? '-1' : '0'}
+      tabIndex={expandedState ? '-1' : tabIndex}
       role="search"
       ref={searchRef}
       onClick={event => handleExpand(event, true)}
@@ -88,6 +89,7 @@ const TableToolbarSearch = ({
       className={searchContainerClasses}>
       <Search
         size="sm"
+        tabIndex={expandedState ? tabIndex : '-1'}
         className={className}
         defaultValue={defaultValue}
         value={value}
@@ -147,6 +149,11 @@ TableToolbarSearch.propTypes = {
    */
   translateWithId: PropTypes.func.isRequired,
 
+  /**
+   * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /**
    * Whether the search should be allowed to expand
    */
@@ -158,6 +165,7 @@ TableToolbarSearch.propTypes = {
 };
 
 TableToolbarSearch.defaultProps = {
+  tabIndex: '0',
   translateWithId,
   persistent: false,
 };

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
@@ -1818,6 +1818,7 @@ exports[`DataTable should render 1`] = `
                   id="custom-id"
                   onChange={[Function]}
                   persistent={true}
+                  tabIndex="0"
                   translateWithId={[Function]}
                 />
                 <TableToolbarMenu
@@ -2185,14 +2186,14 @@ exports[`DataTable should render 1`] = `
                     disabled={false}
                     kind="primary"
                     onClick={[Function]}
-                    tabIndex={0}
+                    tabIndex={-1}
                     type="button"
                   >
                     <button
                       className="bx--batch-summary__cancel bx--btn bx--btn--primary"
                       disabled={false}
                       onClick={[Function]}
-                      tabIndex={0}
+                      tabIndex={-1}
                       type="button"
                     >
                       Cancel
@@ -2221,6 +2222,7 @@ exports[`DataTable should render 1`] = `
                 id="custom-id"
                 onChange={[Function]}
                 persistent={true}
+                tabIndex="0"
                 translateWithId={[Function]}
               >
                 <div
@@ -2239,6 +2241,7 @@ exports[`DataTable should render 1`] = `
                     onChange={[Function]}
                     placeHolderText="Filter table"
                     size="sm"
+                    tabIndex="-1"
                     type="text"
                     value=""
                   >
@@ -2291,6 +2294,7 @@ exports[`DataTable should render 1`] = `
                         onChange={[Function]}
                         placeholder="Filter table"
                         role="searchbox"
+                        tabIndex="-1"
                         type="text"
                         value=""
                       />
@@ -2793,6 +2797,7 @@ exports[`DataTable sticky header should render 1`] = `
                   id="custom-id"
                   onChange={[Function]}
                   persistent={true}
+                  tabIndex="0"
                   translateWithId={[Function]}
                 />
                 <TableToolbarMenu
@@ -3163,14 +3168,14 @@ exports[`DataTable sticky header should render 1`] = `
                     disabled={false}
                     kind="primary"
                     onClick={[Function]}
-                    tabIndex={0}
+                    tabIndex={-1}
                     type="button"
                   >
                     <button
                       className="bx--batch-summary__cancel bx--btn bx--btn--primary"
                       disabled={false}
                       onClick={[Function]}
-                      tabIndex={0}
+                      tabIndex={-1}
                       type="button"
                     >
                       Cancel
@@ -3199,6 +3204,7 @@ exports[`DataTable sticky header should render 1`] = `
                 id="custom-id"
                 onChange={[Function]}
                 persistent={true}
+                tabIndex="0"
                 translateWithId={[Function]}
               >
                 <div
@@ -3217,6 +3223,7 @@ exports[`DataTable sticky header should render 1`] = `
                     onChange={[Function]}
                     placeHolderText="Filter table"
                     size="sm"
+                    tabIndex="-1"
                     type="text"
                     value=""
                   >
@@ -3269,6 +3276,7 @@ exports[`DataTable sticky header should render 1`] = `
                         onChange={[Function]}
                         placeholder="Filter table"
                         role="searchbox"
+                        tabIndex="-1"
                         type="text"
                         value=""
                       />

diff --git a/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -20,14 +20,14 @@ exports[`DataTable.TableBatchActions should render 1`] = `
           disabled={false}
           kind="primary"
           onClick={[MockFunction]}
-          tabIndex={0}
+          tabIndex={-1}
           type="button"
         >
           <button
             className="bx--batch-summary__cancel bx--btn bx--btn--primary"
             disabled={false}
             onClick={[MockFunction]}
-            tabIndex={0}
+            tabIndex={-1}
             type="button"
           >
             Cancel

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
@@ -6,6 +6,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
   id="custom-id"
   onChange={[MockFunction]}
   persistent={false}
+  tabIndex="0"
   translateWithId={[Function]}
 >
   <div
@@ -25,6 +26,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
       onChange={[Function]}
       placeHolderText="Filter table"
       size="sm"
+      tabIndex="-1"
       type="text"
       value=""
     >
@@ -77,6 +79,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
           onChange={[Function]}
           placeholder="Filter table"
           role="searchbox"
+          tabIndex="-1"
           type="text"
           value=""
         />

diff --git a/packages/react/src/components/DataTable/stories/with-batch-actions.js b/packages/react/src/components/DataTable/stories/with-batch-actions.js
@@ -59,24 +59,31 @@ export default props => (
         <TableToolbar>
           <TableBatchActions {...getBatchActionProps()}>
             <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
               renderIcon={Delete}
               onClick={batchActionClick(selectedRows)}>
               Delete
             </TableBatchAction>
             <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
               renderIcon={Save}
               onClick={batchActionClick(selectedRows)}>
               Save
             </TableBatchAction>
             <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
               renderIcon={Download}
               onClick={batchActionClick(selectedRows)}>
               Download
             </TableBatchAction>
           </TableBatchActions>
           <TableToolbarContent>
-            <TableToolbarSearch onChange={onInputChange} />
-            <TableToolbarMenu>
+            <TableToolbarSearch
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+              onChange={onInputChange}
+            />
+            <TableToolbarMenu
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}>
               <TableToolbarAction primaryFocus onClick={() => alert('Alert 1')}>
                 Action 1
               </TableToolbarAction>
@@ -87,7 +94,11 @@ export default props => (
                 Action 3
               </TableToolbarAction>
             </TableToolbarMenu>
-            <Button onClick={action('Add new row')} size="small" kind="primary">
+            <Button
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+              onClick={action('Add new row')}
+              size="small"
+              kind="primary">
               Add new
             </Button>
           </TableToolbarContent>