[dev-overlay] Fix outstanding a11y issues reported by Axe (#80290)

Adds labels to buttons that had no discernible text.

The automated tests via `test-storybook` seem to ignore `parameters.a11y.config.rules` so we can't leverage `test-storybook` in CI.
I can't even use `parameters.a11y.test`.

We need `parameters.a11y.config.rules` since some of the color-contrast violations are either minor (just slightly below threshold) or false-positives either because our background is misconfigured in automated tests, or background is not detected properly.

Author: eps1lon

packages/next/.storybook/preview.tsx

@@ -18,6 +18,26 @@ const preview: Preview = {
   parameters: {
     a11y: {
       element: 'nextjs-portal',
+      config: {
+        standards: {
+          ariaAttrs: {
+            'aria-modal': {
+              global: true,
+            },
+          },
+        },
+        rules: [
+          {
+            // It's incredibly hard to find a code highlighting theme that works
+            // for both light and dark themes and passes WCAG color contrast.
+            // These kind of tests should really only fail when you regress
+            // on a value below threshold.
+            id: 'color-contrast',
+            selector: '.code-frame-lines',
+            enabled: false,
+          },
+        ],
+      },
     },
     controls: {
       matchers: {

packages/next/src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.stories.tsx

@@ -9,6 +9,18 @@ const meta: Meta<typeof CallStackFrame> = {
     backgrounds: {
       default: 'background-100-dark',
     },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            // Manual testing shows no violation.
+            // TODO: We might have setup more explicit backgrounds depending on theme.
+            enabled: false,
+          },
+        ],
+      },
+    },
   },
   decorators: [withShadowPortal],
 }

packages/next/src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx

@@ -23,10 +23,6 @@ export const CallStackFrame: React.FC<{
       : undefined
   )
 
-  // Format method to strip out the webpack layer prefix.
-  // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx
-  const formattedMethod = f.methodName.replace(/^\([\w-]+\)\//, '')
-
   // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,
   // we'll skip rendering the frame in this case.
   const fileSource = getFrameSource(f)
@@ -42,9 +38,13 @@ export const CallStackFrame: React.FC<{
       data-nextjs-call-stack-frame-ignored={frame.ignored}
     >
       <div className="call-stack-frame-method-name">
-        <HotlinkedText text={formattedMethod} />
+        <HotlinkedText text={f.methodName} />
         {hasSource && (
-          <button onClick={open} className="open-in-editor-button">
+          <button
+            onClick={open}
+            className="open-in-editor-button"
+            aria-label={`Open ${f.methodName} in editor`}
+          >
             <ExternalIcon width={16} height={16} />
           </button>
         )}

packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.stories.tsx

@@ -9,6 +9,18 @@ const meta: Meta<typeof CallStack> = {
     backgrounds: {
       default: 'background-100-dark',
     },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            // Manual testing shows no violation.
+            // TODO: We might have setup more explicit backgrounds depending on theme.
+            enabled: false,
+          },
+        ],
+      },
+    },
   },
   decorators: [withShadowPortal],
 }

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.stories.tsx

@@ -8,6 +8,7 @@ const meta: Meta<typeof NextLogo> = {
     layout: 'centered',
   },
   args: {
+    'aria-label': 'Open Next.js DevTools',
     onClick: () => console.log('Clicked!'),
   },
   decorators: [withShadowPortal],

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-message/error-message.stories.tsx

@@ -6,6 +6,21 @@ const meta: Meta<typeof ErrorMessage> = {
   component: ErrorMessage,
   parameters: {
     layout: 'fullscreen',
+    backgrounds: {
+      default: 'background-100-light',
+    },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            // Manual testing shows no violation.
+            // TODO: We might have setup more explicit backgrounds depending on theme.
+            enabled: false,
+          },
+        ],
+      },
+    },
   },
   decorators: [withShadowPortal],
 }

packages/next/src/client/components/react-dev-overlay/ui/components/hydration-diff/diff-view.tsx

@@ -50,10 +50,9 @@ import { CollapseIcon } from '../../icons/collapse-icon'
  */
 export function PseudoHtmlDiff({
   reactOutputComponentDiff,
-  ...props
 }: {
   reactOutputComponentDiff: string
-} & React.HTMLAttributes<HTMLPreElement>) {
+}) {
   const [isDiffCollapsed, toggleCollapseHtml] = useState(true)
 
   const htmlComponents = useMemo(() => {
@@ -120,12 +119,14 @@ export function PseudoHtmlDiff({
       data-nextjs-container-errors-pseudo-html-collapse={isDiffCollapsed}
     >
       <button
+        aria-expanded={!isDiffCollapsed}
+        aria-label="complete Component Stack"
         data-nextjs-container-errors-pseudo-html-collapse-button
         onClick={() => toggleCollapseHtml(!isDiffCollapsed)}
       >
         <CollapseIcon collapsed={isDiffCollapsed} />
       </button>
-      <pre {...props}>
+      <pre className="nextjs__container_errors__component-stack">
         <code>{htmlComponents}</code>
       </pre>
     </div>

packages/next/src/client/components/react-dev-overlay/ui/components/terminal/terminal.stories.tsx

@@ -6,6 +6,18 @@ const meta: Meta<typeof Terminal> = {
   component: Terminal,
   parameters: {
     layout: 'fullscreen',
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            // Manual testing shows no violation.
+            // TODO: We might have setup more explicit backgrounds depending on theme.
+            enabled: false,
+          },
+        ],
+      },
+    },
   },
   decorators: [withShadowPortal],
 }

packages/next/src/client/components/react-dev-overlay/ui/container/errors.tsx

@@ -202,7 +202,6 @@ export function Errors({
 
       {errorDetails.reactOutputComponentDiff ? (
         <PseudoHtmlDiff
-          className="nextjs__container_errors__component-stack"
           reactOutputComponentDiff={errorDetails.reactOutputComponentDiff || ''}
         />
       ) : null}

packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx

@@ -16,6 +16,18 @@ const meta: Meta<typeof DevOverlay> = {
   component: DevOverlay,
   parameters: {
     layout: 'fullscreen',
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            // Manual testing shows no violation.
+            // TODO: We might have setup more explicit backgrounds depending on theme.
+            enabled: false,
+          },
+        ],
+      },
+    },
   },
 }