From 47ce1da58c81be5890ae8e85fd460f0123e58062 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Fri, 20 Feb 2026 10:20:36 +0100
Subject: [PATCH 1/2] fix: Add ScrollArea prop focusable for when it has no
 interactive children

---
 .../ScrollArea/ScrollArea.stories.tsx         | 34 +++++++++++++++++++
 .../components/ScrollArea/ScrollArea.tsx      |  8 ++++-
 .../syntaxhighlighter/syntaxhighlighter.tsx   |  2 +-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/code/core/src/components/components/ScrollArea/ScrollArea.stories.tsx b/code/core/src/components/components/ScrollArea/ScrollArea.stories.tsx
index d04efff54258..1aef91e37405 100644
--- a/code/core/src/components/components/ScrollArea/ScrollArea.stories.tsx
+++ b/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>
+);
diff --git a/code/core/src/components/components/ScrollArea/ScrollArea.tsx b/code/core/src/components/components/ScrollArea/ScrollArea.tsx
index 8a45f2056881..f5fa9a343008 100644
--- a/code/core/src/components/components/ScrollArea/ScrollArea.tsx
+++ b/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 }>(
@@ -89,11 +94,12 @@ 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}>
         {children}
       </ScrollAreaViewport>
       {horizontal && (
diff --git a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
index 58286cec773e..494afdc587e2 100644
--- a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/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>
 );

From 0cb0d09b54ec67782daa02993f7924fe1b7921a7 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Fri, 27 Feb 2026 14:20:07 +0100
Subject: [PATCH 2/2] UI: Add focus outline to focusable scroll area

---
 .../components/ScrollArea/ScrollArea.tsx      | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/code/core/src/components/components/ScrollArea/ScrollArea.tsx b/code/core/src/components/components/ScrollArea/ScrollArea.tsx
index f5fa9a343008..edbca799f1a9 100644
--- a/code/core/src/components/components/ScrollArea/ScrollArea.tsx
+++ b/code/core/src/components/components/ScrollArea/ScrollArea.tsx
@@ -28,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;
@@ -99,7 +107,12 @@ export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
     ref
   ) => (
     <ScrollAreaRoot scrollbarsize={scrollbarSize} offset={offset} className={className}>
-      <ScrollAreaViewport ref={ref} style={{ scrollPadding }} tabIndex={focusable ? 0 : undefined}>
+      <ScrollAreaViewport
+        ref={ref}
+        style={{ scrollPadding }}
+        tabIndex={focusable ? 0 : undefined}
+        focusable={focusable}
+      >
         {children}
       </ScrollAreaViewport>
       {horizontal && (