Problem/Motivation
A webform with ajax enabled and one or more required field does not correctly set focus back to the form after failed validation when using Android Talkback and possibly other screen readers. Instead the focus is set to the top of the page.
See
webform-talkback-broken.mp4 →
demonstrating this.
Initially it appears that the focus is set to the error message, but it's actually the drupal.announce javascript reading out the messages after the page has loaded. When you navigate to the next element you get sent to the top of the page.
Steps to reproduce
- Install Drupal 10.3 and Webform 6.2
- Enable ajax on the default contact webform
- Enable Talback on an Android device (or use BrowserStack as per the video
- Attempt to submit the form
- Navigate by using the swipe left/right feature in Talkback
Proposed resolution
It appears $response->addCommand(new WebformScrollTopCommand('#' . $this->getWrapperId(), $scroll_top_target)); is attempting to solve this already. It calls Drupal.AjaxCommands.prototype.webformScrollTop which calls $(response.selector + '-content').trigger('focus');.
Unfortunately this doesn't actually work for screen readers. The best I could come up with was to add $response->addCommand(new FocusFirstCommand('#' . $this->getWrapperId())); after the WebformScrollTopCommand. This will try to find the first tabbable element in the form and focus on that. If there are no tabbable elements then it will try to focus on the container. This results in the following behaviour.
webform-talkback.mp4 →
The first tabbable element is the close button of the message, which is a bit counter intuitive, but better than being at the top of the page.
Remaining tasks
Ideally I think we should be able to focus on the form wrapper instead of the first tabbable element. Perhaps someone big brained can solve it that way instead.
User interface changes
API changes
Data model changes