Sticky subnav and fix E2E test

code/addons/a11y/src/components/A11YPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { Badge, Button, ScrollArea } from 'storybook/internal/components';
+import { Badge, Button } from 'storybook/internal/components';
 
 import { SyncIcon } from '@storybook/icons';
 
@@ -146,11 +146,7 @@ export const A11YPanel: React.FC = () => {
     <>
       {discrepancy && <TestDiscrepancyMessage discrepancy={discrepancy} />}
       {status === 'ready' || status === 'ran' ? (
-        <>
+        <Tabs key="tabs" tabs={tabs} />
-          <ScrollArea vertical horizontal>
-            <Tabs key="tabs" tabs={tabs} />
-          </ScrollArea>
-        </>
       ) : (
         <Centered style={{ marginTop: discrepancy ? '1em' : 0 }}>
           {status === 'initial' && 'Initializing...'}

code/addons/a11y/src/components/Tabs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
+import { IconButton, ScrollArea, TooltipNote, WithTooltip } from 'storybook/internal/components';
 
 import { CollapseIcon, ExpandAltIcon, EyeCloseIcon, EyeIcon, SyncIcon } from '@storybook/icons';
 
@@ -11,30 +11,12 @@ import { styled } from 'storybook/theming';
 import type { RuleType } from '../types';
 import { useA11yContext } from './A11yContext';
 
-// TODO: reuse the Tabs component from storybook/theming instead of re-building identical functionality
-
 const Container = styled.div({
   width: '100%',
   position: 'relative',
   minHeight: '100%',
 });
 
-const GlobalToggle = styled.div(() => ({
-  alignItems: 'center',
-  cursor: 'pointer',
-  display: 'flex',
-  fontSize: 13,
-  height: 40,
-  padding: '0 15px',
-
-  input: {
-    marginBottom: 0,
-    marginLeft: 10,
-    marginRight: 0,
-    marginTop: -1,
-  },
-}));
-
 const Item = styled.button<{ active?: boolean }>(
   ({ theme }) => ({
     textDecoration: 'none',
@@ -67,9 +49,12 @@ const Item = styled.button<{ active?: boolean }>(
 const TabsWrapper = styled.div({});
 const ActionsWrapper = styled.div({ display: 'flex', gap: 6 });
 
-const List = styled.div(({ theme }) => ({
+const Subnav = styled.div(({ theme }) => ({
   boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
   background: theme.background.app,
+  position: 'sticky',
+  top: 0,
+  zIndex: 1,
   display: 'flex',
   flexWrap: 'wrap',
   alignItems: 'center',
@@ -113,7 +98,7 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
 
   return (
     <Container ref={ref}>
-      <List>
+      <Subnav>
         <TabsWrapper>
           {tabs.map((tab, index) => (
             <Item
@@ -168,8 +153,10 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
             </IconButton>
           </WithTooltip>
         </ActionsWrapper>
-      </List>
+      </Subnav>
-      {tabs.find((t) => t.type === activeTab)?.panel}
+      <ScrollArea vertical horizontal>
+        {tabs.find((t) => t.type === activeTab)?.panel}
+      </ScrollArea>
     </Container>
   );
 };

code/e2e-tests/addon-a11y.spec.ts

@@ -22,7 +22,7 @@ test.describe('addon-a11y', () => {
     // check that the highlight is visible
     const imageElement = sbPage.previewIframe().getByRole('img');
     expect(await imageElement.evaluate((el) => getComputedStyle(el).outline)).toBe(
-      'rgba(255, 68, 0, 0.6) solid 1px'
+      'rgba(255, 68, 0, 0.6) dashed 1px'
     );
 
     await page.getByRole('button', { name: 'Hide highlights' }).click();