feat: exposed tabIndex to Table component (#17907)

* feat: exposed tabIndex to Table component * test: fixed tests * Update packages/react/src/components/DataTable/Table.tsx Co-authored-by: Alison Joseph <[email protected]> * fix: reset hard --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Riddhi Bansal <[email protected]>
carbon-design-system · Nov 5, 2024 · a87e522 · a87e522
1 parent 32bd13e
commit a87e522
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1906,6 +1906,9 @@ Map {
         "stickyHeader": Object {
           "type": "bool",
         },
+        "tabIndex": Object {
+          "type": "number",
+        },
         "useStaticWidth": Object {
           "type": "bool",
         },
@@ -7949,6 +7952,9 @@ Map {
       "stickyHeader": Object {
         "type": "bool",
       },
+      "tabIndex": Object {
+        "type": "number",
+      },
       "useStaticWidth": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/DataTable/Table.tsx b/packages/react/src/components/DataTable/Table.tsx
@@ -54,6 +54,11 @@ interface TableProps {
    * `true` to add useZebraStyles striping.
    */
   useZebraStyles?: boolean;
+
+  /**
+   * Specify the table tabIndex
+   */
+  tabIndex?: number;
 }
 
 const isElementWrappingContent = (
@@ -108,6 +113,7 @@ export const Table = ({
   stickyHeader,
   overflowMenuOnHover = true,
   experimentalAutoAlign = false,
+  tabIndex,
   ...other
 }: PropsWithChildren<TableProps>) => {
   const { titleId, descriptionId } = useContext(TableContext);
@@ -226,7 +232,7 @@ export const Table = ({
     <div
       className={`${prefix}--data-table-content`}
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex={isScrollable ? 0 : undefined}>
+      tabIndex={tabIndex ?? (isScrollable ? 0 : undefined)}>
       <table
         aria-labelledby={titleId}
         aria-describedby={descriptionId}
@@ -287,6 +293,11 @@ Table.propTypes = {
    * `true` to add useZebraStyles striping.
    */
   useZebraStyles: PropTypes.bool,
+
+  /**
+   * Specify the table tabIndex
+   */
+  tabIndex: PropTypes.number,
 };
 
 export default Table;