Allow keyboard navigation to dialog's scroll region (#4000)

* move ScrollableRegion to its own internal component

* use scrollable region in dialog body

* changeset

* Update src/internal/components/ScrollableRegion.tsx

Co-authored-by: Josh Black <[email protected]>

* Revert "Update src/internal/components/ScrollableRegion.tsx"

This reverts commit 37d3231.

---------

Co-authored-by: Josh Black <[email protected]>

Author: strackoverflow

.changeset/mighty-ghosts-swim.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fix an issue where the scrollable Dialog body could not be focused with the keyboard

src/DataTable/Table.tsx

@@ -11,7 +11,7 @@ import {Column, CellAlignment} from './column'
 import {UniqueRow} from './row'
 import {SortDirection} from './sorting'
 import {useTableLayout} from './useTable'
-import {useOverflow} from '../internal/hooks/useOverflow'
+import {ScrollableRegion} from '../internal/components/ScrollableRegion'
 
 // ----------------------------------------------------------------------------
 // Table
@@ -662,29 +662,6 @@ const Button = styled.button`
   }
 `
 
-type ScrollableRegionProps = React.PropsWithChildren<{
-  'aria-labelledby'?: string
-  className?: string
-}>
-
-function ScrollableRegion({'aria-labelledby': labelledby, children, ...rest}: ScrollableRegionProps) {
-  const ref = React.useRef(null)
-  const hasOverflow = useOverflow(ref)
-  const regionProps = hasOverflow
-    ? {
-        'aria-labelledby': labelledby,
-        role: 'region',
-        tabIndex: 0,
-      }
-    : {}
-
-  return (
-    <Box {...rest} {...regionProps} ref={ref} sx={{overflow: 'auto'}}>
-      {children}
-    </Box>
-  )
-}
-
 export {
   TableContainer,
   TableTitle,

src/Dialog/Dialog.tsx

@@ -13,6 +13,7 @@ import {FocusKeys} from '@primer/behaviors'
 import Portal from '../Portal'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {useId} from '../hooks/useId'
+import {ScrollableRegion} from '../internal/components/ScrollableRegion'
 
 /* Dialog Version 2 */
 
@@ -324,7 +325,9 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             sx={sx}
           >
             {header}
-            {body}
+            <ScrollableRegion aria-labelledby={dialogLabelId} className="DialogOverflowWrapper">
+              {body}
+            </ScrollableRegion>
             {footer}
           </StyledDialog>
         </Backdrop>

src/internal/components/ScrollableRegion.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Box from '../../Box'
+import {useOverflow} from '../hooks/useOverflow'
+
+type ScrollableRegionProps = React.PropsWithChildren<{
+  'aria-labelledby'?: string
+  className?: string
+}>
+
+export function ScrollableRegion({'aria-labelledby': labelledby, children, ...rest}: ScrollableRegionProps) {
+  const ref = React.useRef(null)
+  const hasOverflow = useOverflow(ref)
+  const regionProps = hasOverflow
+    ? {
+        'aria-labelledby': labelledby,
+        role: 'region',
+        tabIndex: 0,
+      }
+    : {}
+
+  return (
+    <Box {...rest} {...regionProps} ref={ref} sx={{overflow: 'auto'}}>
+      {children}
+    </Box>
+  )
+}