fix: added bool to actionbar to toggle default focus instead of actio…

…nbar bottom focus
storybookjs · Oct 11, 2023 · 7a9ac41 · 7a9ac41
1 parent 1593ff3
commit 7a9ac41
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git 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
@@ -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<HTMLButtonElement>) => void;
   disabled?: boolean;
+  defaultFocus?: boolean;
 }
 
 export interface ActionBarProps {
@@ -68,9 +69,15 @@ export interface ActionBarProps {
 
 export const ActionBar: FC<ActionBarProps> = ({ actionItems, ...props }) => (
   <Container {...props}>
-    {actionItems.map(({ title, className, onClick, disabled }, index: number) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <ActionButton key={index} className={className} onClick={onClick} disabled={disabled}>
+    {actionItems.map(({ title, className, onClick, disabled, defaultFocus }, index: number) => (
+      <ActionButton
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        className={className}
+        onClick={onClick}
+        disabled={disabled}
+        defaultFocus={defaultFocus}
+      >
         {title}
       </ActionButton>
     ))}