From 3598c0dd45829a7888cd5d2c2363a6ecc9ae8440 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Fri, 1 Mar 2024 13:28:00 +0100
Subject: [PATCH 1/2] fix(error-overlay): improve a11y, minor refactors

---
 .../internal/container/Errors.tsx             |  2 +-
 ...-html.tsx => ComponentStackPseudoHtml.tsx} | 20 +++++++------
 .../RuntimeError/GroupedStackFrames.tsx       | 28 ++-----------------
 .../internal/container/RuntimeError/index.tsx |  4 +++
 .../internal/icons/CollapseIcon.tsx           | 24 ++++++++++++++++
 .../RuntimeError => icons}/FrameworkIcon.tsx  |  3 +-
 6 files changed, 43 insertions(+), 38 deletions(-)
 rename packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/{component-stack-pseudo-html.tsx => ComponentStackPseudoHtml.tsx} (94%)
 create mode 100644 packages/next/src/client/components/react-dev-overlay/internal/icons/CollapseIcon.tsx
 rename packages/next/src/client/components/react-dev-overlay/internal/{container/RuntimeError => icons}/FrameworkIcon.tsx (98%)

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
index f5fb01b24ec10..9adce0869b584 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
@@ -25,7 +25,7 @@ import { VersionStalenessInfo } from '../components/VersionStalenessInfo'
 import type { VersionInfo } from '../../../../../server/dev/parse-version-info'
 import { getErrorSource } from '../../../../../shared/lib/error-source'
 import { HotlinkedText } from '../components/hot-linked-text'
-import { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html'
+import { PseudoHtmlDiff } from './RuntimeError/ComponentStackPseudoHtml'
 import {
   isHtmlTagsWarning,
   type HydrationErrorState,
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/ComponentStackPseudoHtml.tsx
similarity index 94%
rename from packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx
rename to packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/ComponentStackPseudoHtml.tsx
index 602f91639994c..a0c0f7be53b7f 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/ComponentStackPseudoHtml.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>
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/GroupedStackFrames.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/GroupedStackFrames.tsx
index 9b26bf620aeb9..542a6fac880e4 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/GroupedStackFrames.tsx
+++ b/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,
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
index 406460568365a..2d2851867da3b 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
+++ b/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);
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/icons/CollapseIcon.tsx b/packages/next/src/client/components/react-dev-overlay/internal/icons/CollapseIcon.tsx
new file mode 100644
index 0000000000000..4e38bd16b2ddc
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/FrameworkIcon.tsx b/packages/next/src/client/components/react-dev-overlay/internal/icons/FrameworkIcon.tsx
similarity index 98%
rename from packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/FrameworkIcon.tsx
rename to packages/next/src/client/components/react-dev-overlay/internal/icons/FrameworkIcon.tsx
index bbdabf365a11d..e161a4aa9c3ff 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/FrameworkIcon.tsx
+++ b/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,

From cbb0594cb199b3d3931c0962d4a1d9ca04cc6239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Fri, 1 Mar 2024 14:08:18 +0100
Subject: [PATCH 2/2] rename

---
 .../components/react-dev-overlay/internal/container/Errors.tsx  | 2 +-
 ...onentStackPseudoHtml.tsx => component-stack-pseudo-html.tsx} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/{ComponentStackPseudoHtml.tsx => component-stack-pseudo-html.tsx} (100%)

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
index 9adce0869b584..f5fb01b24ec10 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx
@@ -25,7 +25,7 @@ import { VersionStalenessInfo } from '../components/VersionStalenessInfo'
 import type { VersionInfo } from '../../../../../server/dev/parse-version-info'
 import { getErrorSource } from '../../../../../shared/lib/error-source'
 import { HotlinkedText } from '../components/hot-linked-text'
-import { PseudoHtmlDiff } from './RuntimeError/ComponentStackPseudoHtml'
+import { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html'
 import {
   isHtmlTagsWarning,
   type HydrationErrorState,
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/ComponentStackPseudoHtml.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx
similarity index 100%
rename from packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/ComponentStackPseudoHtml.tsx
rename to packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx