fix: remove native title from TableToolbarMenu (#22013)

adamalston · web-flow · commit f96472c5ef1f · 2026-04-20T16:09:53.000Z
diff --git a/packages/react/src/components/DataTable/TableToolbarMenu.tsx b/packages/react/src/components/DataTable/TableToolbarMenu.tsx
@@ -37,7 +37,6 @@ const TableToolbarMenu = ({
     <OverflowMenu
       renderIcon={renderIcon}
       className={toolbarActionClasses}
-      title={iconDescription}
       iconDescription={iconDescription}
       menuOptionsClass={menuOptionsClasses}
       flipped
diff --git a/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js b/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js
@@ -41,7 +41,21 @@ describe('TableToolbarMenu', () => {
         </TableToolbarMenu>
       );
 
-      expect(screen.getByText('Icon description')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Icon description' })
+      ).not.toHaveAttribute('title');
+    });
+
+    it('should not render a native title attribute', () => {
+      render(
+        <TableToolbarMenu>
+          <span>test</span>
+        </TableToolbarMenu>
+      );
+
+      expect(
+        screen.getByRole('button', { name: 'Settings' })
+      ).not.toHaveAttribute('title');
     });
 
     it('should respect renderIcon prop', () => {
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
@@ -585,7 +585,6 @@ exports[`DataTable behaves as expected selection should render and match snapsho
                 aria-haspopup="true"
                 aria-labelledby="tooltip-_r_2t_"
                 class="cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost cds--btn--icon-only"
-                title="Settings"
                 type="button"
               >
                 <svg
@@ -1022,7 +1021,6 @@ exports[`DataTable renders as expected - Component API should render and match s
                 aria-haspopup="true"
                 aria-labelledby="tooltip-_r_m_"
                 class="cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost cds--btn--icon-only"
-                title="Settings"
                 type="button"
               >
                 <svg
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -16,7 +16,6 @@ exports[`TableToolbarMenu renders as expected - Component API should render 1`]
           aria-haspopup="true"
           aria-labelledby="tooltip-_r_1_"
           class="custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost cds--btn--icon-only"
-          title="Add"
           type="button"
         >
           <svg

Original file line number	Diff line number	Diff line change
@@ -16,7 +16,6 @@ exports[`TableToolbarMenu renders as expected - Component API should render 1`]
`16`	`16`	`aria-haspopup="true"`
`17`	`17`	`aria-labelledby="tooltip-_r_1_"`
`18`	`18`	`class="custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost cds--btn--icon-only"`
`19`		`- title="Add"`
`20`	`19`	`type="button"`
`21`	`20`	`>`
`22`	`21`	`<svg`