fix: enhance a11y, prevent double firing in error rating (vercel#74563)

Improved a11y (aria-live, aria-label) and simplified loading/error state
to prevent double firing when feedback buttons get clicked multiple
times while loading.

Author: gaojude

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx

@@ -5,24 +5,28 @@ import { ThumbsDown } from '../../../../icons/thumbs/thumbs-down'
 interface ErrorFeedbackProps {
   errorCode: string
 }
-
 export function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {
   const [voted, setVoted] = useState<boolean | null>(null)
   const hasVoted = voted !== null
 
   const handleFeedback = useCallback(
     async (wasHelpful: boolean) => {
+      // Optimistically set feedback state without loading/error states to keep implementation simple
+      setVoted(wasHelpful)
       try {
         const response = await fetch(
-          `${process.env.__NEXT_ROUTER_BASEPATH || ''}/__nextjs_error_feedback?errorCode=${errorCode}&wasHelpful=${wasHelpful}`
+          `${process.env.__NEXT_ROUTER_BASEPATH || ''}/__nextjs_error_feedback?${new URLSearchParams(
+            {
+              errorCode,
+              wasHelpful: wasHelpful.toString(),
+            }
+          )}`
         )
 
         if (!response.ok) {
           // Handle non-2xx HTTP responses here if needed
           console.error('Failed to record feedback on the server.')
         }
-
-        setVoted(wasHelpful)
       } catch (error) {
         console.error('Failed to record feedback:', error)
       }
@@ -32,27 +36,29 @@ export function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {
 
   return (
     <>
-      <div className="error-feedback">
+      <div className="error-feedback" role="region" aria-label="Error feedback">
         {hasVoted ? (
-          <p className="error-feedback-thanks">Thanks for your feedback!</p>
+          <p className="error-feedback-thanks" role="status" aria-live="polite">
+            Thanks for your feedback!
+          </p>
         ) : (
           <>
             <p>Was this helpful?</p>
             <button
               aria-label="Mark as helpful"
               onClick={() => handleFeedback(true)}
-              disabled={hasVoted}
               className={`feedback-button ${voted === true ? 'voted' : ''}`}
+              type="button"
             >
-              <ThumbsUp />
+              <ThumbsUp aria-hidden="true" />
             </button>
             <button
               aria-label="Mark as not helpful"
               onClick={() => handleFeedback(false)}
-              disabled={hasVoted}
               className={`feedback-button ${voted === false ? 'voted' : ''}`}
+              type="button"
             >
-              <ThumbsDown />
+              <ThumbsDown aria-hidden="true" />
             </button>
           </>
         )}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.test.tsx

@@ -68,9 +68,8 @@ describe('ErrorOverlayLayout Component', () => {
       screen.queryByText('Thanks for your feedback!')
     ).not.toBeInTheDocument()
 
-    // Click helpful button
     await act(async () => {
-      fireEvent.click(screen.getByLabelText('Mark as helpful'))
+      fireEvent.click(screen.getByRole('button', { name: 'Mark as helpful' }))
     })
 
     expect(fetch).toHaveBeenCalledWith(
@@ -88,7 +87,9 @@ describe('ErrorOverlayLayout Component', () => {
     ).not.toBeInTheDocument()
 
     await act(async () => {
-      fireEvent.click(screen.getByLabelText('Mark as not helpful'))
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Mark as not helpful' })
+      )
     })
 
     expect(fetch).toHaveBeenCalledWith(

test/e2e/app-dir/app-prefetch/prefetching.test.ts

@@ -348,8 +348,7 @@ describe('app dir - prefetching', () => {
       beforePageLoad(page: Page) {
         page.on('request', async (req: Request) => {
           const url = new URL(req.url())
-          const headers = await req.allHeaders()
-          if (headers['rsc']) {
+          if (url.searchParams.has('_rsc')) {
             rscRequests.push(url.pathname + url.search)
           }
         })