Docs: aria-live implementation error in "Chapter 14 : improving accessibility" of "Learn Next.JS" doc.

[Tan-Aki]

What is the improvement or update you wish to see?

In the "Chapter 14 : improving accessibility" of the "Learn Next.JS" doc, there seems to be an aria-live implementation error.

At some point, in the /app/ui/invoices/create-form.tsx, we are asked to add the following code underneath the customer select input.

      {state.errors?.customerId ? (
        <div
          id="customer-error"
          aria-live="polite"
          className="mt-2 text-sm text-red-500"
        >
          {state.errors.customerId.map((error: string) => (
            <p key={error}>{error}</p>
          ))}
        </div>
      ) : null}

I have tried with both JAWS and NVDA screen readers, and the error is never read out loud after it appears.

I believe it has to do with the fact the "aria live region" did not exist at the page's initial load, thus, the screen reader doesn't know it has a region to monitor for content updates.

I'm not sure it is the right approach, but I would maybe suggest something along these lines instead:

                    <span aria-live='polite'>
                        {state.errors?.customerId ? (
                            <div id='customer-error' className='mt-2 text-sm text-red-500'>
                                {state.errors.customerId.map((error: string) => (
                                    <p key={error}>{error}</p>
                                ))}
                            </div>
                        ) : null}
                    </span>

We wrap the error inside a span with the aria-live on it.

At least it now works with both JAWS and NVDA.

Thank you for the great work besides that!

PS: After fixing the issue, I would also probably add in the doc one message along these lines:
"Beware, if all the aria-live validation error messages in this form appear at the same time (if we hit "create invoice" when all the fields were left blank), they won't necessarily be read in the right order by a screen reader, this way of doing is NOT production ready."

Is there any context that might help us understand?

In this article, the faulty behavior is also used as a not-to-be-followed example" : https://dev.to/abbeyperini/live-regions-in-react-4dmd

This code will not work in NVDA/Chrome. You can get it to work with VO, with a lot of effort and state updates.

{showRegion && (
  <div>
    <div aria-live="polite">
      {liveRegionContent !== "" ? <p>{liveRegionContent}</p> : null}
    </div>
  </div>
)}

Does the docs page already exist? Please link to it.

https://nextjs.org/learn/dashboard-app/improving-accessibility

[delbaoliveira]

Hey @Tan-Aki, thank you for taking the time to explain it and for the article. I've opened a PR to move aria-live outside of the conditional and make sure it's present in the DOM. Would you mind taking a look and leaving comments (if any)? 👀

I'll also update the chapter separately.