Element with role="alert" is not focused correctly on second failed form submission

[domoscargin]

Steps to reproduce:

1. Open Firefox
2. Browse to http://govuk-frontend-review.herokuapp.com/full-page-examples/update-your-account-details
3. Dismiss the banner (optional)
4. Leave form fields empty
5. Submit the form
6. When the page reloads, submit the form again

Actual behavior:

In Firefox:

The second time the invalid form is submitted and the page reloads, focus very briefly correctly hits the element with role=”alert” (the “There is a problem” error summary), but then settles on the submit button. NVDA does not read the “There is a problem…” alert. Tabbing at this point takes the user directly to the links in the footer.

In Chrome:

On certain subsequent form submissions, focus is set on the element with role=”alert” long enough that NVDA correctly reads the “There is a problem…” content. However, focus is then pulled to the submit button, so tabbing takes the user straight to the footer links.

Expected behavior:

Every time an invalid form is submitted and the page reloads, focus is set to the element with role=”alert” and NVDA reads the content beginning “There is a problem…” . The next tabbed link should be the “Enter your email address” message.

System configuration

NVDA installed/portable/running from source:

Testing via https://assistivlabs.com/

NVDA version:

2022.1 (but present till at least 2020.3)

Windows version:

Windows 10 Pro

Name and version of other software in use when reproducing the issue:

Firefox 102 Chrome 103

Other information about your system:

N/A

Other questions

Does the issue still occur after restarting your computer?

Yes

Have you tried any other versions of NVDA? If so, please report their behaviors.

Yes, similar behaviours down to at least 2020.3.

If NVDA add-ons are disabled, is your problem still occurring?

Yes

Does the issue still occur after you run the COM Registration Fixing Tool in NVDA's tools menu?

Unsure, unable to try.

[seanbudd]

Welcome @domoscargin ,

We are unable to process this issue as it stands.

To be able to reproduce this issue, we need a code sample. Provide a minimal HTML sample to reproduce this using codepen.

Kind Regards, NV Access Software Developers

[owenatgov]

Hi @seanbudd. Here is a minimal example https://codepen.io/owenatgov/full/PoRemwa Please let us know how we can progress this further.

Testing

Environment

• NVDA 2022.1
• Firefox 102

Steps to reproduce

1. Go to the codepen linked above
2. Navigate down once using screen reader navigation, note screen reader focus location
3. Refresh page
4. Repeat steps 2 and 3

Expected result

In every instance, the screen reader focus will remain in the initially focused div (#focus-on-load) and move to the first item in the list of links (link with text "first error").

Actual result

After the first or second page refresh (intended to simulate a resubmit in the absence of the option to test against our own infrastructure), screen reader focus will move to one of the questions in the form, usually the first.

[Adriani90]

I can reproduce the issue as in the original description when pressing enter on the "save" button while using browse mode on every page load. The focus remains on the save button and does not move to the alert error after the second page load. In focus mode, browse mode on page load is disabled in browse mode settings, NVDA seems to handle the focus correctly, it lands right before the div and pressing tab brings me to the first suggestion of the alert error.

In chromoum browsers, the focus moves to the alert error heading in browse mode as expected.

cc: @jcsteh since this issue affects only Firefox.