revert(emcn-docs): drop the post-freeze tabIndex props from the staging merge

The c037660 merge ported #9827's tabIndex options into the frozen
CodeContent, ScrollRegion and Tab. Restored to their pre-merge source. The
docs sample keeps one keyboard entry at the call site: its panel leaves the
tab order and the code region takes focus when it overflows.

Author: waleedlatif1

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

@@ -86,13 +86,12 @@ export function SamplePanels({
           value={item.value}
           label={item.label}
           id={item.id ?? `${selectorId}-${item.value}`}
+          // One keyboard entry per sample: the code region, which takes focus when it overflows.
           tabIndex={-1}
           {...(presentation === 'select' ? { role: 'region', 'aria-labelledby': selectorId } : {})}
           className='[&>div]:pt-0'
         >
-          <CodeContent label={`${label}: ${item.label}`} tabIndex={0}>
-            {item.panel}
-          </CodeContent>
+          <CodeContent label={`${label}: ${item.label}`}>{item.panel}</CodeContent>
         </Tab>
       ))}
     </Tabs>

packages/emcn-docs/src/components/code-block/code-block.tsx

@@ -18,15 +18,13 @@ interface CodeBlockProps extends HTMLAttributes<HTMLElement> {
 interface CodeContentProps {
   children: ReactNode
   label?: string
-  tabIndex?: number
 }
 
-export function CodeContent({ children, label = 'Code sample', tabIndex }: CodeContentProps) {
+export function CodeContent({ children, label = 'Code sample' }: CodeContentProps) {
   return (
     <ScrollRegion
       label={label}
-      tabIndex={tabIndex}
-      className='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]'
+      className='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'
     >
       {children}
     </ScrollRegion>

packages/emcn-docs/src/components/scroll-region/scroll-region.tsx

@@ -9,23 +9,13 @@ interface ScrollRegionProps extends HTMLAttributes<HTMLDivElement> {
   label: string
 }
 
-/**
- * Keyboard scrolling is reachable only when this region has horizontal overflow, unless a caller
- * sets `tabIndex` to keep it always (or never) in the tab order.
- */
-export function ScrollRegion({
-  label,
-  className,
-  children,
-  tabIndex,
-  ...props
-}: ScrollRegionProps) {
-  const region = useScrollEdges('horizontal', { tabStop: tabIndex === undefined })
+/** Keyboard scrolling is reachable only when this region has horizontal overflow. */
+export function ScrollRegion({ label, className, children, ...props }: ScrollRegionProps) {
+  const region = useScrollEdges('horizontal', { tabStop: true })
   return (
     <div
       {...props}
       ref={region}
-      tabIndex={tabIndex ?? 0}
       role='region'
       aria-label={label}
       className={cn(docsScrollAreaClass, 'min-w-0 overflow-x-auto ', className)}

packages/emcn-docs/src/components/tabs/tabs.tsx

@@ -315,7 +315,6 @@ export function Tab({
   id,
   className,
   children,
-  tabIndex = 0,
   'aria-labelledby': labelledBy,
   ...props
 }: TabProps) {
@@ -326,7 +325,6 @@ export function Tab({
       {...props}
       keepMounted
       inert={false}
-      tabIndex={active ? tabIndex : -1}
       value={value}
       id={id ?? context?.panelIds.get(value) ?? `${context?.baseId}-${encodeURIComponent(value)}`}
       aria-labelledby={labelledBy ?? `${context?.baseId}-${encodeURIComponent(value)}-trigger`}