1913979 - Single-digit input component uses individual input fields for each digit

Status: RESOLVED MOVED

(Cloud Services :: Server: Firefox Accounts, defect)

Description

[Anna Yeddi [:ayeddi]]

The current implementation of the split-digit component is one of the good ones that currently exist, for instance, a keyboard-only user could copy-paste the value and arrow navigation works well within the component, but in general separating each digit into its own input field is a sub-optimal experience for any assistive technology user by the nature of how the text inputs are handled.

The major down sides of using individual input fields for each digit are the following:

1. A user cannot review the full input
2. It's terrible for Braille display users:
   1. They’re all block elements and only would be shown one by one on the Braille display.
   2. Even if they were inline elements, Braille display users wouldn’t see them on a single line in many cases.
3. Not good for speech users

Thus, using individual input fields for each digit is still a high access-S3 accessibility issue.

As an experienced screen reader user has reported after attempting using this component (the label bug is described and tracked in the bug 1913823):

We can make it slightly better (e.g. by shortening the labels of the individual fields), but we never could make it good.

Tested on the Storybook page

Comment 1

[Lauren Zugai]

Hi @ayeddi, thank you for the review! Regarding "A user cannot review the full input", what do you think about on "Submit", "Submit [number]" is read instead? We implemented this originally, but our QA team flagged it as unexpected and that it didn't seem right to have the full number read outloud for security reasons. We changed this back based on their recommendations.

I'll convey the feedback to our UX team. Thanks again!

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:markh, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[vpomerleau]

Thank you very much :ayeddi for the review! UX did some additional research to explore solutions for the braille display, but did not find a satisfactory solution. Therefore their recommendation is also to revert to one regular input - I've filed an engineering ticket in JIRA (FXA-10390) for this work.

Comment 4

[Wil Clouser [:clouserw]]

Thanks Valerie. I'm going to close this as MOVED to https://mozilla-hub.atlassian.net/browse/FXA-10390