WWW: Remove tabIndex from live code editor (#836)

Author: dbchristopher

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- WWW site keyboard navigation improvement
 - `Menu` closes by default on `MenuItem` click
 - Provide `@types/styled-system` as a package dependency
 - `TextArea` only supports vertical resizing now

packages/www/src/MDX/Pre/CodeSandbox.tsx

@@ -26,7 +26,7 @@
 
 import { Icon, IconButton, IconNames, Tooltip } from '@looker/components'
 import { PrismTheme, Language } from 'prism-react-renderer'
-import React, { FC, ReactNode, useState } from 'react'
+import React, { FC, ReactNode, useState, useCallback } from 'react'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import {
   LiveProvider,
@@ -66,6 +66,18 @@ const CodeSandbox = ({
     setShowEditor(!showEditor)
   }
 
+  const liveEditorRef = useCallback(
+    (node: HTMLDivElement) => {
+      if (showEditor && node) {
+        const liveEditorInput = node.querySelector('textarea')
+        if (liveEditorInput) {
+          liveEditorInput.tabIndex = -1
+        }
+      }
+    },
+    [showEditor]
+  )
+
   return (
     <SandboxWrapper>
       <LiveProvider
@@ -98,7 +110,7 @@ const CodeSandbox = ({
             )}
           </LiveConsumer>
         </LivePreviewWrapper>
-        <EditorWrapper>
+        <EditorWrapper ref={liveEditorRef}>
           {showEditor && <LiveEditor />}
           <ActionLayout editorIsVisible={showEditor}>
             <ToggleCodeButton