fix(docs): give API samples one keyboard entry

Author: waleedlatif1

apps/docs/components/docs/sample-panels.tsx

@@ -86,10 +86,13 @@ export function SamplePanels({
           value={item.value}
           label={item.label}
           id={item.id ?? `${selectorId}-${item.value}`}
+          tabIndex={-1}
           {...(presentation === 'select' ? { role: 'region', 'aria-labelledby': selectorId } : {})}
           className='[&>div]:pt-0'
         >
-          <CodeContent label={`${label}: ${item.label}`}>{item.panel}</CodeContent>
+          <CodeContent label={`${label}: ${item.label}`} tabIndex={0}>
+            {item.panel}
+          </CodeContent>
         </Tab>
       ))}
     </Tabs>

apps/docs/components/ui/code-block.tsx

@@ -18,12 +18,14 @@ interface CodeBlockProps extends HTMLAttributes<HTMLElement> {
 interface CodeContentProps {
   children: ReactNode
   label?: string
+  tabIndex?: number
 }
 
-export function CodeContent({ children, label = 'Code sample' }: CodeContentProps) {
+export function CodeContent({ children, label = 'Code sample', tabIndex }: CodeContentProps) {
   return (
     <ScrollRegion
       label={label}
+      tabIndex={tabIndex}
       className='focus-visible:-outline-offset-2 p-4 [&_code]:block [&_code]:bg-transparent [&_code]:p-0 [&_code]:font-normal [&_code]:text-docs-code [&_pre]:m-0 [&_pre]:w-max [&_pre]:min-w-full [&_pre]:bg-transparent! [&_pre]:p-0 [&_pre]:font-mono [&_pre]:text-docs-code [&_pre]:[font-variant-ligatures:none]'
     >
       {children}

apps/docs/components/ui/scroll-region.tsx

@@ -8,20 +8,21 @@ interface ScrollRegionProps extends HTMLAttributes<HTMLDivElement> {
   label: string
 }
 
-/** Keeps scrolling keyboard-accessible before hydration, then skips regions without overflow. */
+/** Keeps scrolling keyboard-accessible before hydration, then skips nonoverflowing regions unless opted in. */
 export function ScrollRegion({
   label,
   className,
   children,
-  tabIndex = 0,
+  tabIndex,
   ...props
 }: ScrollRegionProps) {
   const region = useRef<HTMLDivElement>(null)
   useEffect(() => {
     const element = region.current
     if (!element) return
     function updateFocusability() {
-      if (element) element.tabIndex = element.scrollWidth > element.clientWidth + 1 ? tabIndex : -1
+      if (element)
+        element.tabIndex = tabIndex ?? (element.scrollWidth > element.clientWidth + 1 ? 0 : -1)
     }
     const observer = new ResizeObserver(updateFocusability)
     observer.observe(element)
@@ -32,7 +33,7 @@ export function ScrollRegion({
     <div
       {...props}
       ref={region}
-      tabIndex={tabIndex}
+      tabIndex={tabIndex ?? 0}
       role='region'
       aria-label={label}
       className={cn(

apps/docs/scripts/fixtures/content-baseline.json

@@ -18851,42 +18851,15 @@
       "media": [
         {
           "type": "Image",
-          "src": "/static/docs-captures/files-formatting.webp",
-          "alt": "Selected text in the Markdown editor with the text style, bold, italic, link, and more formatting controls",
+          "src": "/static/docs-captures/files-markdown.webp",
+          "alt": "A release brief open in the Markdown editor beside Chat, with a launch checklist, owner table, and highlighted JSON code block",
           "width": {
-            "expression": "900"
+            "expression": "2400"
           },
           "height": {
-            "expression": "340"
-          },
-          "variant": "detail",
-          "background": "architecture"
-        },
-        {
-          "type": "Image",
-          "src": "/static/docs-captures/files-table.webp",
-          "alt": "A Markdown owner table with controls for adding a row, managing columns, and deleting the table",
-          "width": {
             "expression": "1200"
           },
-          "height": {
-            "expression": "460"
-          },
-          "variant": "detail",
-          "background": "architecture"
-        },
-        {
-          "type": "Image",
-          "src": "/static/docs-captures/files-code.webp",
-          "alt": "A highlighted JSON code block with language, line wrap, and copy controls",
-          "width": {
-            "expression": "1200"
-          },
-          "height": {
-            "expression": "400"
-          },
-          "variant": "detail",
-          "background": "architecture"
+          "variant": "overview"
         }
       ]
     },