fix(tabs): make IconTab's tooltip visible again (#18447)

* fix(tabs): make IconTab's tooltip visible again

* chore(playwright): add expect() to test

---------

Co-authored-by: emyarod <emyarod@users.noreply.github.com>
Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

Author: 3 people

e2e/components/Tabs/Tabs-test.e2e.js

@@ -7,8 +7,9 @@
 
 'use strict';
 
-const { test } = require('@playwright/test');
+const { expect, test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
+const { snapshot } = require('../../test-utils/snapshot');
 const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('Tabs', () => {
@@ -52,6 +53,15 @@ test.describe('Tabs', () => {
           id: 'components-tabs--icon-20-only',
           theme,
         });
+
+        // Focus the tab to invoke the tooltip and snapshot it
+        await page.keyboard.press('Tab');
+        await expect(page.getByRole('tab', { name: 'Activity' })).toBeFocused();
+        await snapshot(page, {
+          theme,
+          component: 'Tabs',
+          id: 'components-tabs--icon-20-only | focused',
+        });
       });
 
       test('icon only @vrt', async ({ page }) => {
@@ -60,6 +70,15 @@ test.describe('Tabs', () => {
           id: 'components-tabs--icon-only',
           theme,
         });
+
+        // Focus the tab to invoke the tooltip and snapshot it
+        await page.keyboard.press('Tab');
+        await expect(page.getByRole('tab', { name: 'Activity' })).toBeFocused();
+        await snapshot(page, {
+          theme,
+          component: 'Tabs',
+          id: 'components-tabs--icon-only | focused',
+        });
       });
 
       test('contained @vrt', async ({ page }) => {

packages/react/src/components/Tabs/Tabs.stories.js

@@ -378,7 +378,7 @@ export const Icon20Only = () => {
 export const IconOnly = () => {
   return (
     <Tabs>
-      <TabList>
+      <TabList iconSize="default">
         <IconTab label="Analyze" disabled>
           <IbmWatsonDiscovery aria-label="Analyze" />
         </IconTab>

packages/styles/scss/components/tabs/_tabs.scss

@@ -522,6 +522,8 @@
     //-----------------------------
     // Icon Item
     //-----------------------------
+    &.#{$prefix}--tabs__icon--default,
+    &.#{$prefix}--tabs__icon--lg,
     &.#{$prefix}--tabs__icon--default .#{$prefix}--tab--list,
     &.#{$prefix}--tabs__icon--lg .#{$prefix}--tab--list {
       overflow-x: visible;