feat(Tabs): improve a11y, and add renderPanel prop (#1393)

WEB-2148

Author: atabel

playroom/snippets.tsx

@@ -1133,27 +1133,37 @@ const tabsSnippets: Array<Snippet> = [
         name: 'Tabs (without icons)',
         code: `
         <Tabs
-            selectedIndex={getState('tabIndex', 0)}
-            onChange={setState('tabIndex')}
+            selectedIndex={getState('selectedTab', 0)}
+            onChange={setState('selectedTab')}
             tabs={[
                 {text: 'Tab 1'},
                 {text: 'Tab 2'},
                 {text: 'Tab 3'},
             ]}
+            renderPanel={({selectedIndex, panelProps}) => (
+                <div {...panelProps}>
+                    <Text3 regular>Panel {selectedIndex + 1}</Text3>
+                </div>
+            )}
         />`,
     },
     {
         group: 'Tabs',
         name: 'Tabs (with icons)',
         code: `
         <Tabs
-            selectedIndex={getState('tabIndex', 0)}
-            onChange={setState('tabIndex')}
+            selectedIndex={getState('selectedTab', 0)}
+            onChange={setState('selectedTab')}
             tabs={[
                 {text: 'Tab 1', Icon: IconAppointmentRegular},
                 {text: 'Tab 2', Icon: IconBrainRegular},
                 {text: 'Tab 3', Icon: IconBusRegular},
             ]}
+            renderPanel={({selectedIndex, panelProps}) => (
+                <div {...panelProps}>
+                    <Text3 regular>Panel {selectedIndex + 1}</Text3>
+                </div>
+            )}
         />`,
     },
 ];

src/__screenshot_tests__/__image_snapshots__/tabs-screenshot-test-tsx-tabs-in-desktop-with-icon-true-1-snap.png

@@ -1,3 +1,4 @@
+import {within} from '@telefonica/acceptance-testing';
 import {openStoryPage, screen, setRootFontSize} from '../test-utils';
 
 const THEME_VARIANTS = ['default', 'inverse', 'alternative'] as const;
@@ -55,25 +56,22 @@ test('Tabs with long text and icon', async () => {
 });
 
 test('Tabs selected line appears properly', async () => {
-    const page = await openStoryPage({
+    await openStoryPage({
         id: 'components-tabs--default',
         device: 'MOBILE_IOS',
     });
 
-    const tabs = await screen.findByRole('tablist');
+    const tabslist = await screen.findByRole('tablist');
+    const tabs = await within(tabslist).findAllByRole('tab');
 
-    await page.evaluate(() => {
-        document.querySelector<HTMLElement>('[data-tabindex="1"]')?.click();
-    });
+    await tabs[1].click();
 
-    const secondTabActive = await tabs.screenshot();
+    const secondTabActive = await tabslist.screenshot();
     expect(secondTabActive).toMatchImageSnapshot();
 
-    await page.evaluate(() => {
-        document.querySelector<HTMLElement>('[data-tabindex="2"]')?.click();
-    });
+    await tabs[2].click();
 
-    const thirdTabActive = await tabs.screenshot();
+    const thirdTabActive = await tabslist.screenshot();
     expect(thirdTabActive).toMatchImageSnapshot();
 });
 

src/__screenshot_tests__/__image_snapshots__/tabs-screenshot-test-tsx-tabs-in-mobile-ios-with-icon-true-1-snap.png

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import {Box, IconCloseRegular, ResponsiveLayout, Tabs} from '..';
+import {
+    Box,
+    IconAppointmentRegular,
+    IconBrainRegular,
+    IconBusRegular,
+    ResponsiveLayout,
+    Tabs,
+    Text3,
+} from '..';
 
 import type {Variant} from '../theme-variant-context';
 
@@ -35,8 +43,15 @@ export const Default: StoryComponent<Args> = ({tabCount, text, theme, icon}) =>
                     onChange={setSelectedIndex}
                     tabs={Array.from({length: tabCount}).map((_, index) => ({
                         text: `${text} ${index + 1}`,
-                        Icon: icon ? IconCloseRegular : undefined,
+                        Icon: icon
+                            ? [IconAppointmentRegular, IconBrainRegular, IconBusRegular][index]
+                            : undefined,
                     }))}
+                    renderPanel={({selectedIndex, panelProps}) => (
+                        <div {...panelProps}>
+                            <Text3 regular>Panel {selectedIndex + 1}</Text3>
+                        </div>
+                    )}
                 />
             </Box>
         </ResponsiveLayout>

src/__screenshot_tests__/__image_snapshots__/tabs-screenshot-test-tsx-tabs-in-tablet-with-icon-true-1-snap.png

@@ -59,6 +59,7 @@ const baseTab = style([
         background: 'transparent',
     }),
     {
+        outlineOffset: -8,
         textAlign: 'center',
         verticalAlign: 'baseline',
         borderBottom: '2px solid transparent',
@@ -88,9 +89,19 @@ export const tabVariants = styleVariants({
     ],
 });
 
+const focusOutlineStyles = {
+    // the revert important! is needed to bypass the styles applied by TabFocus component
+    outline: 'revert !important',
+    outlineOffset: -8,
+};
+
 export const tabHover = styleVariants({
     default: [
         style({
+            ':focus-visible': {
+                ...focusOutlineStyles,
+                color: vars.colors.textPrimary,
+            },
             '@media': {
                 [mq.supportsHover]: {
                     ':hover': {
@@ -102,6 +113,10 @@ export const tabHover = styleVariants({
     ],
     inverse: [
         style({
+            ':focus-visible': {
+                ...focusOutlineStyles,
+                color: vars.colors.textPrimaryInverse,
+            },
             '@media': {
                 [mq.supportsHover]: {
                     ':hover': {