Voice Control inserts spaces in input fields

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)

[philsherry]

@36degrees Just done.

AX: Voice Control inserts leading spaces in input fields

[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?