Make scrollable code boxes accessible by keyboards (npm#296)

* Make scrollable code boxes accessible by keyboards

* Fixed the issue on MacOS+Chrome (triple announce)

* Resize the scroll handle

* Add aria-label to the scroll handle

Author: anurbol

theme/src/components/code.js

@@ -2,20 +2,27 @@ import {Absolute, BorderBox, Relative, Text} from '@primer/components'
 import Highlight, {defaultProps} from 'prism-react-renderer'
 import githubTheme from 'prism-react-renderer/themes/github'
 import React from 'react'
+import {useState, useEffect} from 'react'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'
 
 function Code({className, children, live, noinline}) {
+  const [scrollHandleStyle, setScrollHandleStyle] = useState({position: 'absolute'})
   const language = className ? className.replace(/language-/, '') : ''
   const code = children.trim()
+  const scrollHandleRef = React.createRef()
+  
+  useEffect(() => {
+    resizeScrollHandle()
+  })
 
   if (live) {
     return <LiveCode code={code} language={language} noinline={noinline} />
   }
 
   return (
     <Relative>
-      <Absolute top={0} right={0} p={2}>
+      <Absolute top={0} right={0} p={2} zIndex={1}>
         <ClipboardCopy value={code} />
       </Absolute>
       <Highlight
@@ -34,6 +41,8 @@ function Code({className, children, live, noinline}) {
             border={0}
             style={{...style, overflow: 'auto'}}
           >
+            {/* This is the scroll handle, it is supposed to be focused with keyboard and scroll a wide codebox horizontally */}
+            <div aria-hidden="true" tabIndex={0} style={scrollHandleStyle} ref={scrollHandleRef} aria-label={code}>&nbsp;</div>
             {tokens.map((line, i) => (
               <div key={i} {...getLineProps({line, key: i})}>
                 {line.map((token, key) => (
@@ -51,6 +60,22 @@ function Code({className, children, live, noinline}) {
       </Highlight>
     </Relative>
   )
+
+  /**
+   * Resize the scroll handle to the size of the code contents, since the former has to be positioned absolutely.
+   */
+  function resizeScrollHandle() {
+    // Skip if already resized.
+    if (typeof scrollHandleStyle.width !== 'undefined') 
+      return
+
+    const node = scrollHandleRef.current
+    node.parentElement.style.position = 'relative'
+    const computedStyle = getComputedStyle(node.parentElement)
+    const height = node.parentElement.clientHeight - parseInt(computedStyle.paddingTop, 10) - parseInt(computedStyle.paddingBottom, 10)
+    const width = node.parentElement.scrollWidth - parseInt(computedStyle.paddingLeft, 10) - parseInt(computedStyle.paddingRight, 10)
+    setScrollHandleStyle({...scrollHandleStyle, height, width})
+  }
 }
 
 export default Code