Accessibility: Error message on login page not announced to screen reader users

[amberhinds]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

On the login form on the My Account Page, error messages are not announced to screen reader users, though they appear visually on the page.

The page refreshes rather than submitting the form with ajax, and there is a visual error message but due to the refresh screen reader users are loaded at the top of the page and do not hear the message.

Form code:
https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/templates/global/form-login.php

This is likely related to #43635

Expected behavior

When a form error is present, there should be an auditory message for screen reader users to know that there was an error.

You can either do this by:
A) When the page reloads, set keyboard focus on the error message so it is read out. OR
B) Add an aria-live region on the status message and trigger it after the page loads.

You may also consider changing this form to submit with ajax so screen reader users are not sent to the top of the page as happens with a refresh.

Actual behavior

Screen reader users don't easily know when a an error occurs.

Steps to reproduce

1. Turn on a screen reader such as VoiceOver or NVDA.
2. Go to the My Account page while logged out to see the login form.
3. Leave at least one required field blank and submit the form.
4. Listen as the page reloads and observe there's no announcement about the error.

WordPress Environment

N/A

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[amberhinds]

This also applies to the password reset form error message.