Issue Summary

When error messages appeared on empty form submission the focus moves inappropriately.

Steps to Reproduce

1. Navigate to the side navigation.
2. Navigate to the "Add shortcuts" link and activate it.
3. Observe that non-modal dialog appear on the screen.
4. Submit that form with empty fields.
5. Check that errors has been appeared on the page.
6. Ensure that focus is moving inappropriately.

Screen Recording

Screen Recording 2023-10-09 at 4.39.56 PM.mov

Actual Results

On submitting the empty form, an error messages gets appeared just below the input field. Ideally focus should moves on to first input field with error. However the focus is directly moving on "Label" field, instead of moving on "URL field".
As a result, keyboard only and screen reader users will have to navigate the fields again to enter the valid data.

Expected Results

Ensure that screen reader and keyboard focus should move on the first input field i.e. on "URL" and then second i.e. on "Label".

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 114.0.5735.198 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest