diff --git a/code/addons/a11y/src/components/A11YPanel.tsx b/code/addons/a11y/src/components/A11YPanel.tsx index 7855cd9396ac..81f198e02090 100644 --- a/code/addons/a11y/src/components/A11YPanel.tsx +++ b/code/addons/a11y/src/components/A11YPanel.tsx @@ -4,16 +4,16 @@ import { styled } from '@storybook/theming'; import { ActionBar, Icons, ScrollArea } from '@storybook/components'; -import type { AxeResults } from 'axe-core'; import { useChannel, useParameter, useStorybookState } from '@storybook/manager-api'; +import type { AxeResults } from 'axe-core'; import { Report } from './Report'; import { Tabs } from './Tabs'; -import { useA11yContext } from './A11yContext'; import { EVENTS } from '../constants'; import type { A11yParameters } from '../params'; +import { useA11yContext } from './A11yContext'; export enum RuleType { VIOLATION, @@ -112,6 +112,7 @@ export const A11YPanel: React.FC = () => { ), onClick: handleManual, + defaultFocus: true, }, ], [status, handleManual] diff --git a/code/ui/components/src/components/ActionBar/ActionBar.tsx b/code/ui/components/src/components/ActionBar/ActionBar.tsx index 643a8a60e40e..e5fd1f8033d0 100644 --- a/code/ui/components/src/components/ActionBar/ActionBar.tsx +++ b/code/ui/components/src/components/ActionBar/ActionBar.tsx @@ -13,7 +13,7 @@ const Container = styled.div(({ theme }) => ({ zIndex: 1, })); -export const ActionButton = styled.button<{ disabled: boolean }>( +export const ActionButton = styled.button<{ disabled: boolean; defaultFocus: boolean }>( ({ theme }) => ({ margin: 0, border: '0 none', @@ -41,16 +41,16 @@ export const ActionButton = styled.button<{ disabled: boolean }>( borderLeft: `1px solid ${theme.appBorderColor}`, borderRadius: 0, }, - - '&:focus': { - boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`, - outline: '0 none', - }, }), ({ disabled }) => disabled && { cursor: 'not-allowed', opacity: 0.5, + }, + ({ theme, defaultFocus }) => + !defaultFocus && { + boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`, + outline: '0 none', } ); ActionButton.displayName = 'ActionButton'; @@ -60,6 +60,7 @@ export interface ActionItem { className?: string; onClick: (e: MouseEvent) => void; disabled?: boolean; + defaultFocus?: boolean; } export interface ActionBarProps { @@ -68,9 +69,15 @@ export interface ActionBarProps { export const ActionBar: FC = ({ actionItems, ...props }) => ( - {actionItems.map(({ title, className, onClick, disabled }, index: number) => ( - // eslint-disable-next-line react/no-array-index-key - + {actionItems.map(({ title, className, onClick, disabled, defaultFocus }, index: number) => ( + {title} ))}