Accessibility: Reflects text input behaviors

[KmBarnett]

Hey, I work for a large company, and our accessibility team suggested that this component act more like a single input because it captures one value. I tried to write their comments as users stories sorry if they are bad

As a user, when I tab to the input, I will see my cursor on the first box that is not filled.

• Ex: There are five characters total. I have filled out positions 1 and 2; tabbing to the input would take me to the 3rd inbox

As a user, when Focus is given to the CodeInput, a screen reader would read the associated label, and not as the focus moves between the box fields.

As a user, when the CodeInput is focused, and I press the left and right arrow keys, the focus moves to the correct box and reads out the current value.

[AlexMiniApps]

@KmBarnett Hello, thank you for the feedback. Actually I don't understand exactly what is wrong currently with the component.
Could you please describe the required behavior? Maybe do you have some screens?

[KmBarnett]

@AlexMiniApps According to our accessibility guy, your component replaces one input with one per character/digit. To give a keyboard user the same experience as an input, the component would need to behave like a regular input. Unfortunately, I do not know how to show screens to display the way a screen reader interacts with your component, so the best feedback I can give follows

• One tab stop for the entire input
• Ability to have one label for the entire input
• Ability to use arrow keys to move between characters/digits

[AlexMiniApps]

@KmBarnett ok, I will research.