Difficulty editing masked input text fields before final hyphen

[luigi]

As shown above for our two masked input fields (phone number and SSN), when the user tries to edit the input in front of the final hyphen, unexpected behavior occurs. Deleting a digit pushes the cursor to the end of the input. Entering a new digit seems to work, but is jarring because the cursor once again gets pushed to the end of the input.

This unexpected behavior does not occur when editing digits after the final hyphen.

[cy-by]

@luigi how urgent is this? Was it reported by clients?

[cy-by]

Notes from today's investigation: in autoformatEventHandler, on every keystroke a new array is created and pushed into.

It has something to do adding the special character when deleting a value before a special character and the total length has already been filled out.

[luigi]

@coltborg Yes, clients have reported it.

[cy-by]

Summary

@bengolder and I looked into fixing this masking issue and found some research on gov.uk that advised not to use masking at all.

Avoid input masking because it makes it harder for users to:

• type a number in their preferred way
• transcribe a number from another place and check that they’ve got it right

We're inclined to deprecate input masking because we trust gov.uk's research, but we want to confirm with design and research before we do it.

Short term recommendation

We advise to not use input masking by removing the .ssn-input or .phone-input class. Gov.uk's recommendations on telephone inputs can also help with how to present these fields.

How we tried to fix it

When trying to fix the JavaScript, we found that inserting special characters as a client types has negative effects when using screen reader, it would read out odd wordings of what was typed as the characters are inserted or when caret position changes. We also attempted to fix this bug by correcting the cursor position in JavaScript, but this further exacerbated the odd way that VoiceOver would read back the input value to the user.

An alternative could be that we keep the length consistent to the maxDigits, but that would mean we would have "blank" characters taking that space up, which would be read by screen readers.