Make resizable SplitPageLayout.Pane keyboard accessible. (#2593)

* Added tabIndex declaration and onKeyDown event handler to VerticalDivider so resizable panes are keyboard accessible.

* Create selfish-clocks-hug.md

* Add input for screen reader to allow users to input specific pane width percentage.

* Linting.

* Use `useSSRSafeId` to generate id for panel width input.

* Fix min and max percentage calculations.

* Clamp min and max percents, revert to last known good value if unable to parse input.

* Pane width form should not be visible.

* Fixing some type errors.

* Updated jest snapshots.

* Handle case where screen was not as wide as the possible diff value.

* Linting.

* Fix issue where merged css was breaking resizable panes.

* Updated snapshots.

* Remove tabindex-based keyboard navigation for resizable panes.

* Update src/PageLayout/PageLayout.tsx

Co-authored-by: Eric Bailey <ericwbailey@users.noreply.github.com>

* Disable eslint for label to make exception for screen reader edge cases.

* Use useId instead of useSSRSafeId.

* Updated snapshots.

Co-authored-by: Eric Bailey <ericwbailey@users.noreply.github.com>

Author: radglob

.changeset/selfish-clocks-hug.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Make resizable SplitPageLayout.Pane keyboard accessible.

src/PageLayout/PageLayout.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import {createGlobalStyle} from 'styled-components'
 import Box from '../Box'
+import {useId} from '../hooks/useId'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
 import {BetterSystemStyleObject, merge, SxProp} from '../sx'
 import {Theme} from '../ThemeProvider'
 import createSlots from '../utils/create-slots'
 import {canUseDOM} from '../utils/environment'
+import VisuallyHidden from '../_VisuallyHidden'
 import {useStickyPaneHeight} from './useStickyPaneHeight'
 
 const {Slots, Slot} = createSlots(['Header', 'Footer'])
@@ -506,6 +508,7 @@ export type PageLayoutPaneProps = {
   sticky?: boolean
   offsetHeader?: string | number
   hidden?: boolean | ResponsiveValue<boolean>
+  id?: string
 } & SxProp
 
 const panePositions = {
@@ -536,6 +539,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
       offsetHeader = 0,
       hidden: responsiveHidden = false,
       children,
+      id,
       sx = {},
     },
     forwardRef,
@@ -597,8 +601,57 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     const paneRef = React.useRef<HTMLDivElement>(null)
     useRefObjectAsForwardedRef(forwardRef, paneRef)
 
+    const MIN_PANE_WIDTH = 256 // 256px, related to `--pane-min-width CSS var.
+    const [minPercent, setMinPercent] = React.useState(0)
+    const [maxPercent, setMaxPercent] = React.useState(0)
+
+    const measuredRef = React.useCallback(() => {
+      if (paneRef.current !== null) {
+        const maxPaneWidthDiffPixels = getComputedStyle(paneRef.current as Element).getPropertyValue(
+          '--pane-max-width-diff',
+        )
+        const paneWidth = paneRef.current.getBoundingClientRect().width
+        const maxPaneWidthDiff = Number(maxPaneWidthDiffPixels.split('px')[0])
+        const viewportWidth = window.innerWidth
+        const maxPaneWidth = viewportWidth > maxPaneWidthDiff ? viewportWidth - maxPaneWidthDiff : viewportWidth
+
+        const minPercent = Math.round((100 * MIN_PANE_WIDTH) / viewportWidth)
+        setMinPercent(minPercent)
+
+        const maxPercent = Math.round((100 * maxPaneWidth) / viewportWidth)
+        setMaxPercent(maxPercent)
+
+        const widthPercent = Math.round((100 * paneWidth) / viewportWidth)
+        setWidthPercent(widthPercent.toString())
+      }
+    }, [paneRef])
+
+    const [widthPercent, setWidthPercent] = React.useState('')
+    const [prevPercent, setPrevPercent] = React.useState('')
+
+    const handleWidthFormSubmit = (event: React.FormEvent<HTMLElement>) => {
+      event.preventDefault()
+      let percent = Number(widthPercent)
+      if (Number.isNaN(percent)) {
+        percent = Number(prevPercent) || minPercent
+      } else if (percent > maxPercent) {
+        percent = maxPercent
+      } else if (percent < minPercent) {
+        percent = minPercent
+      }
+
+      setWidthPercent(percent.toString())
+      // Cache previous valid percent.
+      setPrevPercent(percent.toString())
+
+      updatePaneWidth((percent / 100) * window.innerWidth)
+    }
+
+    const paneId = useId(id)
+
     return (
       <Box
+        ref={measuredRef}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         sx={(theme: any) =>
           merge<BetterSystemStyleObject>(
@@ -671,18 +724,45 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           }}
           sx={(theme: Theme) => ({
             '--pane-min-width': `256px`,
-            '--pane-max-width': `calc(100vw - 511px)`,
+            '--pane-max-width-diff': '511px',
+            '--pane-max-width': `calc(100vw - var(--pane-max-width-diff))`,
             width: resizable
               ? ['100%', null, 'clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width))']
               : paneWidths[width],
             padding: SPACING_MAP[padding],
             overflow: [null, null, 'auto'],
 
             [`@media screen and (min-width: ${theme.breakpoints[3]})`]: {
-              '--pane-max-width': 'calc(100vw - 959px)',
+              '--pane-max-width-diff': '959px',
             },
           })}
         >
+          {resizable && (
+            <VisuallyHidden>
+              <form onSubmit={handleWidthFormSubmit}>
+                {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+                <label htmlFor={`${paneId}-width-input`}>Pane width</label>
+                <p id={`${paneId}-input-hint`}>
+                  Use a value between {minPercent}% and {maxPercent}%
+                </p>
+                <input
+                  id={`${paneId}-width-input`}
+                  aria-describedby={`${paneId}-input-hint`}
+                  name="pane-width"
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                  value={widthPercent}
+                  autoCorrect="off"
+                  autoComplete="off"
+                  type="text"
+                  onChange={event => {
+                    setWidthPercent(event.target.value)
+                  }}
+                />
+                <button type="submit">Change width</button>
+              </form>
+            </VisuallyHidden>
+          )}
           {children}
         </Box>
       </Box>

src/PageLayout/__snapshots__/PageLayout.test.tsx.snap

@@ -66,7 +66,8 @@ exports[`PageLayout renders condensed layout 1`] = `
 
 .c11 {
   --pane-min-width: 256px;
-  --pane-max-width: calc(100vw - 511px);
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
   width: 100%;
   padding: 0;
 }
@@ -145,7 +146,7 @@ exports[`PageLayout renders condensed layout 1`] = `
 
 @media screen and (min-width:1280px) {
   .c11 {
-    --pane-max-width: calc(100vw - 959px);
+    --pane-max-width-diff: 959px;
   }
 }
 
@@ -348,7 +349,8 @@ exports[`PageLayout renders default layout 1`] = `
 
 .c11 {
   --pane-min-width: 256px;
-  --pane-max-width: calc(100vw - 511px);
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
   width: 100%;
   padding: 0;
 }
@@ -437,7 +439,7 @@ exports[`PageLayout renders default layout 1`] = `
 
 @media screen and (min-width:1280px) {
   .c11 {
-    --pane-max-width: calc(100vw - 959px);
+    --pane-max-width-diff: 959px;
   }
 }
 
@@ -641,7 +643,8 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 
 .c11 {
   --pane-min-width: 256px;
-  --pane-max-width: calc(100vw - 511px);
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
   width: 100%;
   padding: 0;
 }
@@ -730,7 +733,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 
 @media screen and (min-width:1280px) {
   .c11 {
-    --pane-max-width: calc(100vw - 959px);
+    --pane-max-width-diff: 959px;
   }
 }
 
@@ -910,7 +913,8 @@ exports[`PageLayout renders with dividers 1`] = `
 
 .c10 {
   --pane-min-width: 256px;
-  --pane-max-width: calc(100vw - 511px);
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
   width: 100%;
   padding: 0;
 }
@@ -999,7 +1003,7 @@ exports[`PageLayout renders with dividers 1`] = `
 
 @media screen and (min-width:1280px) {
   .c10 {
-    --pane-max-width: calc(100vw - 959px);
+    --pane-max-width-diff: 959px;
   }
 }
 

src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap

@@ -101,7 +101,8 @@ exports[`SplitPageLayout renders default layout 1`] = `
 
 .c11 {
   --pane-min-width: 256px;
-  --pane-max-width: calc(100vw - 511px);
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
   width: 100%;
   padding: 16px;
 }
@@ -186,7 +187,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
 
 @media screen and (min-width:1280px) {
   .c11 {
-    --pane-max-width: calc(100vw - 959px);
+    --pane-max-width-diff: 959px;
   }
 }