Govuk-frontend: Voice Control inserts spaces in input fields

[philsherry]

Issue: Voice Control inserts spaces in input fields.
Platform: macOS 11.0.1 (20B29)
Browser: Safari 14.0.1 (16610.2.11.51.8). (Only tested in the native browser, as other vendors will likely refuse to fix anyway.)
Example page: Design System » Date input » Example
Why: When the user inputs a value, Voice Control automatically inserts a leading space, leading to validation errors and a confused user.
Suggest: Client-side trim of leading whitespace on blur()
Example 1: Input of a date on the example page:

Insert the day with the keyboard as a baseline test: 11. Then switch to using Voice Control to enter the month and year.

“01”
“Next field”
“2021”

This actually tries to submit the following three values:

1. "11"
2. " 01"
3. " 2021"

☝️ Note the leading spaces in the inputs where Voice Control was used. Visually, they’re barely noticeable, but these will cause validation issues and force the error state. Here’s a screenshot from Safari’s web inspector, showing those values.

Example 2: Picking a country from the autocomplete:

France (No results)
sigh
“Select word. Delete previous character.”
France (1 Result)

Note: This issue doesn’t occur on mobile devices, but only because Voice Control completely refuses to see the inputs on the example page.

• iPadOS 14.3 (18C66)
• iOS 14.3 (18C66)

[abbott567]

I've also seen this happen with Dragon if a user pauses between numbers or letters. I've seen it come up a few times, and using blur() as @philsherry suggested could be a nice solution for this particular instance.

However, I think there is a guidance or education piece which needs addressing around sanitising input data before validation as it will affect more than just the date component. I've seen it happen on bank account fields and National Insurance number fields, so it then becomes a bit of a can of worms trying to fix it for people rather than getting them to understand their own validation requirements. It also means you'd still have the issue if JS didn't load.

It almost feels like we should have patterns for this kind of thing. We have visual patterns and coded components, but we don't have common sanitisation, regex's, wording etc.

[36degrees]

Having talked about this as a team, we think this is best addressed on the server-side by trimming or otherwise ignoring leading and trailing spaces as part of the validation process where appropriate. We think there'd be scope to add something about this to the 'Help users to recover from validation errors' pattern.

I've created an issue to represent this work – https://github.com/alphagov/govuk-design-system/issues/1450.

@philsherry it seems like this issue should be reported to Apple – have you raised a bug in Webkit / Radar?

[philsherry]

@36degrees Just done.

AX: Voice Control inserts leading spaces in input fields

[edwardhorsford]

To add - after testing, it's not just leading and trailing whitespace, but whitespace between the digits. Dictating with Voice Control I get 2 0 2 1. I think this is probably rather unexpected and teams already stripping leading and trialing whitespace by default are unlikely to catch this.

It would be good to explicitly mention this on the date input component.