Aria form validation not showing on nextjs tutorial

[Neobii]

Summary

Chapter 14: Improving accessibility On the nextjs dashboard, I cannot complete the aria step. https://nextjs.org/learn/dashboard-app/improving-accessibility, instead shows the popup with fill out this field.

Additional information

{/* Invoice Amount */}
        <div className="mb-4">
          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
            Choose an amount
          </label>
          <div className="relative mt-2 rounded-md">
            <div className="relative">
              <input
                id="amount"
                name="amount"
                type="number"
                step="0.01"
                placeholder="Enter USD amount"
                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
                required
                aria-describedby='amount-error'
              />
              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
          <div id="amount-error" aria-live="polite" aria-atomic="true">
        {state.errors?.amount &&
          state.errors.amount.map((error: string) => (
            <p className="mt-2 text-sm text-red-500" key={error}>
              {error}
            </p>
          ))}
      </div>

Example

https://github.com/Neobii/nextjs-dashboard/blob/main/app/ui/invoices/create-form.tsx#L75

[SametDulger]

Why does this happen?
When you use the required attribute on an , the browser performs native validation and shows its own tooltip popup before your React or custom validation code runs.

This native popup blocks interaction and prevents your custom ARIA error messages from being displayed simultaneously.

Therefore, your aria-describedby and custom error UI are not visible during this native validation popup.

How to fix this for better ARIA form validation display in Next.js?
Approach 1: Disable native validation and handle validation manually

Remove the required attribute from the input.

Use form submission handlers (or onBlur/onChange) to perform validation yourself.

When invalid, update your error state so that your custom error message div with aria-live and aria-describedby is updated.

This allows your error messages to show without the native popup blocking.

<input
  id="amount"
  name="amount"
  type="number"
  step="0.01"
  placeholder="Enter USD amount"
  className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
  aria-describedby="amount-error"
  value={amount}
  onChange={(e) => setAmount(e.target.value)}
/>

In your submit handler:

function handleSubmit(event) {
  event.preventDefault();

  if (!amount) {
    setErrors({ amount: ['Please enter an amount.'] });
  } else {
    setErrors({});
    // proceed with submission
  }
}

Approach 2: Use noValidate on the form

Add noValidate to the

element to disable the browser’s native validation behavior entirely.

<form noValidate onSubmit={handleSubmit}>
  {/* inputs */}
</form>

This stops the popup and allows your ARIA error messages to appear as expected.

Why does this improve accessibility?
Screen readers rely on aria-describedby and aria-live regions to announce error messages.

Native validation tooltips are often not announced properly by screen readers.

By disabling native validation and handling errors manually, you can ensure that the error text is accessible and read aloud.

Summary:
Remove required attribute from or

Add noValidate attribute to the

Manage validation in your React state/handlers

Render error messages inside elements with aria-live and linked via aria-describedby

This way your ARIA error messages show up correctly and accessibility is improved.