Make tabbable codeblocks if content overflows

src/components/code/_code_block.tsx

@@ -17,30 +17,27 @@
  * under the License.
  */
 
+import classNames from 'classnames';
+import hljs from 'highlight.js';
 import React, {
+  CSSProperties,
   FunctionComponent,
   KeyboardEvent,
-  CSSProperties,
   useEffect,
   useRef,
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
-import classNames from 'classnames';
-import hljs from 'highlight.js';
-
-import { EuiCopy } from '../copy';
-
+import { keys, useCombinedRefs } from '../../services';
 import { EuiButtonIcon } from '../button';
-
-import { EuiOverlayMask } from '../overlay_mask';
-
+import { keysOf } from '../common';
+import { EuiCopy } from '../copy';
 import { EuiFocusTrap } from '../focus_trap';
-
-import { keys } from '../../services';
 import { EuiI18n } from '../i18n';
-import { EuiInnerText } from '../inner_text';
-import { keysOf } from '../common';
+import { useInnerText } from '../inner_text';
+import { useMutationObserver } from '../observer/mutation_observer';
+import { useResizeObserver } from '../observer/resize_observer';
+import { EuiOverlayMask } from '../overlay_mask';
 import { FontSize, PaddingSize } from './code_block';
 
 const fontSizeToClassNameMap = {
@@ -110,10 +107,31 @@ export const EuiCodeBlockImpl: FunctionComponent<Props> = ({
   const [isPortalTargetReady, setIsPortalTargetReady] = useState(false);
   const codeTarget = useRef<HTMLDivElement | null>(null);
   const code = useRef<HTMLElement | null>(null);
+  const [wrapperRef, setWrapperRef] = useState<Element | null>(null);
+  const [innerTextRef, innerText] = useInnerText('');
+  const combinedRef = useCombinedRefs([innerTextRef, setWrapperRef]);
+  const { width, height } = useResizeObserver(wrapperRef);
   const [codeFullScreen, setCodeFullScreen] = useState<HTMLElement | null>(
     null
   );
 
+  const doesOverflow = () => {
+    if (!wrapperRef) return;
+
+    const { clientWidth, clientHeight, scrollWidth, scrollHeight } = wrapperRef;
+    const doesOverflow =
+      scrollHeight > clientHeight || scrollWidth > clientWidth;
+
+    wrapperRef.setAttribute('tabindex', doesOverflow ? '0' : '-1');
+  };
+
+  useMutationObserver(wrapperRef, doesOverflow, {
+    subtree: true,
+    childList: true,
+  });
+
+  useEffect(doesOverflow, [width, height, wrapperRef]);
+
   useEffect(() => {
     codeTarget.current = document.createElement('div');
     setIsPortalTargetReady(true);
@@ -292,11 +310,10 @@ export const EuiCodeBlockImpl: FunctionComponent<Props> = ({
         <EuiOverlayMask>
           <EuiFocusTrap clickOutsideDisables={true}>
             <div className={fullScreenClasses}>
-              <pre className={preClasses}>
+              <pre className={preClasses} tabIndex={0}>
                 <code
                   ref={setCodeFullScreen}
                   className={codeClasses}
-                  tabIndex={0}
                   onKeyDown={onKeyDown}
                 />
               </pre>
@@ -311,31 +328,22 @@ export const EuiCodeBlockImpl: FunctionComponent<Props> = ({
     return fullScreenDisplay;
   };
 
+  const codeBlockControls = getCodeBlockControls(innerText);
   return isPortalTargetReady ? (
     <>
       {createPortal(children, codeTarget.current!)}
-      <EuiInnerText fallback="">
-        {(innerTextRef, innerText) => {
-          const codeBlockControls = getCodeBlockControls(innerText);
-          return (
-            <div {...wrapperProps}>
-              <pre
-                ref={innerTextRef}
-                style={optionalStyles}
-                className={preClasses}>
-                {codeSnippet}
-              </pre>
-
-              {/*
-                If the below fullScreen code renders, it actually attaches to the body because of
-                EuiOverlayMask's React portal usage.
-              */}
-              {codeBlockControls}
-              {getFullScreenDisplay(codeBlockControls)}
-            </div>
-          );
-        }}
-      </EuiInnerText>
+      <div {...wrapperProps}>
+        <pre ref={combinedRef} style={optionalStyles} className={preClasses}>
+          {codeSnippet}
+        </pre>
+
+        {/*
+          If the below fullScreen code renders, it actually attaches to the body because of
+          EuiOverlayMask's React portal usage.
+        */}
+        {codeBlockControls}
+        {getFullScreenDisplay(codeBlockControls)}
+      </div>
     </>
   ) : null;
 };