fix: a11y issues in HMR overlay

vercel · May 14, 2023 · de6a22e · de6a22e
1 parent afddb6e
commit de6a22e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/...nts/react-dev-overlay/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx b/...nts/react-dev-overlay/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx
@@ -114,6 +114,7 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> =
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
+              <title>previous</title>
               <path
                 d="M6.99996 1.16666L1.16663 6.99999L6.99996 12.8333M12.8333 6.99999H1.99996H12.8333Z"
                 stroke="currentColor"
@@ -135,6 +136,7 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> =
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
+              <title>next</title>
               <path
                 d="M6.99996 1.16666L12.8333 6.99999L6.99996 12.8333M1.16663 6.99999H12H1.16663Z"
                 stroke="currentColor"

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
@@ -308,11 +308,12 @@ export const styles = css`
     color: var(--color-ansi-red);
   }
 
-  .nextjs-container-errors-body > h5:not(:first-child) {
+  .nextjs-container-errors-body > h2:not(:first-child) {
     margin-top: calc(var(--size-gap-double) + var(--size-gap));
   }
-  .nextjs-container-errors-body > h5 {
+  .nextjs-container-errors-body > h2 {
     margin-bottom: var(--size-gap);
+    font-size: var(--size-font-big);
   }
 
   .nextjs-toast-errors-parent {

diff --git a/...rc/client/components/react-dev-overlay/internal/container/RuntimeError/CallStackFrame.tsx b/...rc/client/components/react-dev-overlay/internal/container/RuntimeError/CallStackFrame.tsx
@@ -26,9 +26,9 @@ export const CallStackFrame: React.FC<{
 
   return (
     <div data-nextjs-call-stack-frame>
-      <h6 data-nextjs-frame-expanded={Boolean(frame.expanded)}>
+      <h3 data-nextjs-frame-expanded={Boolean(frame.expanded)}>
         {f.methodName}
-      </h6>
+      </h3>
       <div
         data-has-source={hasSource ? 'true' : undefined}
         tabIndex={hasSource ? 10 : undefined}

diff --git a/...t/components/react-dev-overlay/internal/container/RuntimeError/ComponentStackFrameRow.tsx b/...t/components/react-dev-overlay/internal/container/RuntimeError/ComponentStackFrameRow.tsx
@@ -15,7 +15,7 @@ export function ComponentStackFrameRow({
 
   return (
     <div data-nextjs-component-stack-frame>
-      <h6>{component}</h6>
+      <h3>{component}</h3>
       {file ? (
         <div
           tabIndex={10} // match CallStackFrame

diff --git a/...es/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx b/...es/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
@@ -72,7 +72,7 @@ const RuntimeError: React.FC<RuntimeErrorProps> = function RuntimeError({
     <React.Fragment>
       {firstFrame ? (
         <React.Fragment>
-          <h5>Source</h5>
+          <h2>Source</h2>
           {leadingFrames.map((frame, index) => (
             <CallStackFrame
               key={`leading-frame-${index}-${all}`}
@@ -88,7 +88,7 @@ const RuntimeError: React.FC<RuntimeErrorProps> = function RuntimeError({
 
       {error.componentStackFrames ? (
         <>
-          <h5>Component Stack</h5>
+          <h2>Component Stack</h2>
           {error.componentStackFrames.map((componentStackFrame, index) => (
             <ComponentStackFrameRow
               key={index}
@@ -100,7 +100,7 @@ const RuntimeError: React.FC<RuntimeErrorProps> = function RuntimeError({
 
       {stackFramesGroupedByFramework.length ? (
         <React.Fragment>
-          <h5>Call Stack</h5>
+          <h2>Call Stack</h2>
           <GroupedStackFrames
             groupedStackFrames={stackFramesGroupedByFramework}
             all={all}
@@ -138,14 +138,15 @@ export const styles = css`
     margin-bottom: var(--size-gap-double);
   }
 
-  [data-nextjs-call-stack-frame] > h6,
-  [data-nextjs-component-stack-frame] > h6 {
+  [data-nextjs-call-stack-frame] > h3,
+  [data-nextjs-component-stack-frame] > h3 {
     margin-top: 0;
     margin-bottom: var(--size-gap);
     font-family: var(--font-stack-monospace);
+    font-size: var(--size-font);
     color: #222;
   }
-  [data-nextjs-call-stack-frame] > h6[data-nextjs-frame-expanded='false'] {
+  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {
     color: #666;
   }
   [data-nextjs-call-stack-frame] > div,
@@ -201,7 +202,7 @@ export const styles = css`
     display: none;
   }
 
-  [data-nextjs-collapsed-call-stack-details] h6 {
+  [data-nextjs-collapsed-call-stack-details] h3 {
     color: #666;
   }
   [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {