Merge pull request storybookjs#33876 from storybookjs/sidnioulz/fix-focusable-scroll-area

A11y: Add ScrollArea prop focusable for when it has static children

Author: Sidnioulz

code/core/src/components/components/ScrollArea/ScrollArea.stories.tsx

@@ -123,3 +123,37 @@ export const CustomSize = () => (
     ))}
   </ScrollArea>
 );
+
+export const FocusableVertical = () => (
+  <ScrollArea vertical focusable>
+    {list((i) => (
+      <Fragment key={i}>
+        <Block>{i}</Block>
+        <br />
+      </Fragment>
+    ))}
+  </ScrollArea>
+);
+
+export const FocusableHorizontal = () => (
+  <ScrollArea horizontal focusable>
+    <div style={{ padding: 5 }}>
+      {list((i) => (
+        <Block key={i}>{i}</Block>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const FocusableBoth = () => (
+  <ScrollArea horizontal vertical focusable>
+    {list((i) => (
+      <Fragment key={i}>
+        {list((ii) => (
+          <Block key={ii}>{ii * i}</Block>
+        ))}
+        <br />
+      </Fragment>
+    ))}
+  </ScrollArea>
+);

code/core/src/components/components/ScrollArea/ScrollArea.tsx

@@ -11,6 +11,11 @@ export interface ScrollAreaProps {
   offset?: number;
   scrollbarSize?: number;
   scrollPadding?: number | string;
+  /**
+   * Set this to define a tabIndex on the scrollable content; only needed when content has no
+   * interactive elements.
+   */
+  focusable?: boolean;
 }
 
 const ScrollAreaRoot = styled(ScrollAreaPrimitive.Root)<{ scrollbarsize: number; offset: number }>(
@@ -23,10 +28,18 @@ const ScrollAreaRoot = styled(ScrollAreaPrimitive.Root)<{ scrollbarsize: number;
   })
 );
 
-const ScrollAreaViewport = styled(ScrollAreaPrimitive.Viewport)({
-  width: '100%',
-  height: '100%',
-});
+const ScrollAreaViewport = styled(ScrollAreaPrimitive.Viewport)<{ focusable: boolean }>(
+  ({ focusable, theme }) => ({
+    width: '100%',
+    height: '100%',
+    '&:focus': focusable
+      ? {
+          outline: `2px solid ${theme.color.secondary}`,
+          outlineOffset: -2,
+        }
+      : {},
+  })
+);
 
 const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{
   offset: number;
@@ -89,11 +102,17 @@ export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
       scrollbarSize = 6,
       scrollPadding = 0,
       className,
+      focusable = false,
     },
     ref
   ) => (
     <ScrollAreaRoot scrollbarsize={scrollbarSize} offset={offset} className={className}>
-      <ScrollAreaViewport ref={ref} style={{ scrollPadding }}>
+      <ScrollAreaViewport
+        ref={ref}
+        style={{ scrollPadding }}
+        tabIndex={focusable ? 0 : undefined}
+        focusable={focusable}
+      >
         {children}
       </ScrollAreaViewport>
       {horizontal && (

code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx

@@ -91,7 +91,7 @@ const Wrapper = styled.div<WrapperProps>(
 );
 
 const UnstyledScroller = ({ children, className }: ScrollAreaProps) => (
-  <ScrollArea horizontal vertical className={className}>
+  <ScrollArea horizontal vertical focusable className={className}>
     {children}
   </ScrollArea>
 );