fix(error-overlay): improve a11y, minor refactors

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/GroupedStackFrames.tsx

@@ -1,31 +1,7 @@
 import type { StackFramesGroup } from '../../helpers/group-stack-frames-by-framework'
 import { CallStackFrame } from './CallStackFrame'
-import { FrameworkIcon } from './FrameworkIcon'
-
-export function CollapseIcon({ collapsed }: { collapsed?: boolean } = {}) {
-  // If is not collapsed, rotate 90 degrees
-  return (
-    <svg
-      data-nextjs-call-stack-chevron-icon
-      data-collapsed={collapsed}
-      fill="none"
-      height="20"
-      width="20"
-      shapeRendering="geometricPrecision"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
-      // rotate 90 degrees if not collapsed
-      {...(typeof collapsed === 'boolean'
-        ? { style: { transform: collapsed ? undefined : 'rotate(90deg)' } }
-        : {})}
-    >
-      <path d="M9 18l6-6-6-6" />
-    </svg>
-  )
-}
+import { CollapseIcon } from '../../icons/CollapseIcon'
+import { FrameworkIcon } from '../../icons/FrameworkIcon'
 
 function FrameworkGroup({
   framework,

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx

@@ -1,6 +1,6 @@
 import { useMemo, Fragment, useState } from 'react'
 import type { ComponentStackFrame } from '../../helpers/parse-component-stack'
-import { CollapseIcon } from './GroupedStackFrames'
+import { CollapseIcon } from '../../icons/CollapseIcon'
 
 // In total it will display 6 rows.
 const MAX_NON_COLLAPSED_FRAMES = 6
@@ -12,6 +12,7 @@ const MAX_NON_COLLAPSED_FRAMES = 6
  *
  * For html tags mismatch, it will render it for the code block
  *
+ * ```
  * <pre>
  *  <code>{`
  *    <Page>
@@ -21,20 +22,21 @@ const MAX_NON_COLLAPSED_FRAMES = 6
  *         ^^^
  *  `}</code>
  * </pre>
+ * ```
  *
  * For text mismatch, it will render it for the code block
  *
+ * ```diff
  * <pre>
  * <code>{`
  *   <Page>
  *     <p>
- *       "Server Text" (red text as removed)
- *       "Client Text" (green text as added)
+ * -     "Server Text"
+ * +     "Client Text"
  *     </p>
  *   </Page>
  * `}</code>
- *
- *
+ * ```
  */
 export function PseudoHtmlDiff({
   componentStackFrames,
@@ -46,9 +48,8 @@ export function PseudoHtmlDiff({
   componentStackFrames: ComponentStackFrame[]
   serverContent: string
   clientContent: string
-  [prop: string]: any
   hydrationMismatchType: 'tag' | 'text'
-}) {
+} & React.HTMLAttributes<HTMLPreElement>) {
   const isHtmlTagsWarning = hydrationMismatchType === 'tag'
   const shouldCollapse = componentStackFrames.length > MAX_NON_COLLAPSED_FRAMES
   const [isHtmlCollapsed, toggleCollapseHtml] = useState(shouldCollapse)
@@ -157,12 +158,13 @@ export function PseudoHtmlDiff({
 
   return (
     <div data-nextjs-container-errors-pseudo-html>
-      <span
+      <button
+        tabIndex={10} // match CallStackFrame
         data-nextjs-container-errors-pseudo-html-collapse
         onClick={() => toggleCollapseHtml(!isHtmlCollapsed)}
       >
         <CollapseIcon collapsed={isHtmlCollapsed} />
-      </span>
+      </button>
       <pre {...props}>
         <code>{htmlComponents}</code>
       </pre>

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx

@@ -195,6 +195,10 @@ export const styles = css`
     position: absolute;
     left: 10px;
     top: 10px;
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
   }
   [data-nextjs-container-errors-pseudo-html--diff-add] {
     color: var(--color-ansi-green);

packages/next/src/client/components/react-dev-overlay/internal/icons/CollapseIcon.tsx

@@ -0,0 +1,24 @@
+export function CollapseIcon({ collapsed }: { collapsed?: boolean } = {}) {
+  return (
+    <svg
+      data-nextjs-call-stack-chevron-icon
+      data-collapsed={collapsed}
+      fill="none"
+      height="20"
+      width="20"
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      // rotate 90 degrees if not collapsed.
+      // If collapsed isn't present, the rotation is applied via the `data-nextjs-collapsed-call-stack-details` element's `open` attribute
+      {...(typeof collapsed === 'boolean'
+        ? { style: { transform: collapsed ? undefined : 'rotate(90deg)' } }
+        : {})}
+    >
+      <path d="M9 18l6-6-6-6" />
+    </svg>
+  )
+}

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/FrameworkIcon.tsx → packages/next/src/client/components/react-dev-overlay/internal/icons/FrameworkIcon.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import type { StackFramesGroup } from '../../helpers/group-stack-frames-by-framework'
+import type { StackFramesGroup } from '../helpers/group-stack-frames-by-framework'
 
 export function FrameworkIcon({
   framework,