Repository navigation
Accessibility: Reflects text input behaviors #103
Description
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.
Activity
AlexMiniApps commentedon Oct 19, 2023
@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 commentedon Oct 19, 2023
@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
AlexMiniApps commentedon Oct 20, 2023
@KmBarnett ok, I will research.
Thomas-Schindler commentedon Aug 16, 2024
Hello,
I'm using the library for implementing a two-factor authentication with a mobile authenticator app. Actually I found it very easy to integrate in our Angular 16 application. But as @KmBarnett pointed out, there are some accessibility issues which need to be addressed, otherwise our UX architect will block the usage for the component. :-(
@KmBarnett From what I've seen, there you can tab between the single input fields, so I don't know if it is form an a11y point of view necessary to implement the ability to use the arrow keys.
@AlexMiniApps If checked the outcome in my Firefox browser with the axe development tool and there are critical issues concerning the input component for each digit/character:
I would suggest to add an "aria-label" attribute to each input field withe a value like "code input number +", maybe it would be possible to enhance the component API with an input value "inputLabelTemplate" which is then extended by the index of the input field. That way the user could define a fitting input label like "Authenticate Code Digit Number", which will be extended with the field index for each input element.
Would that be a feasible solution?
AlexMiniApps commentedon Aug 19, 2024
@Thomas-Schindler Thanks for the feedback, I understand your point. I will think about the implementation. Maybe there will be an array of strings per each input instead of the single string inputLabelTemplate.
charliejlevine commentedon Feb 18, 2025
+1
localpcguy commentedon Jun 16, 2025
Because it's multiple inputs that act as a group, might look into using
<fieldset>to wrap all of them with a single<legend>to describe the purpose, and then have a label associated with each individual input. I would avoid the use ofaria-labelif possible, maybe by use of a "screen-reader" only style to provide the label text but visually hide it (see instances of.screenReaderOnlyor.visually-hiddenclasses). That tends to be preferable for accessibility in my experience compared to usingaria-label.And nice to haves, but ideally the legend and possibly even label text would be able to be passed as properties. For the label text, could be able to pass a function that is called for each label with the label index. Similar nice to haves for placeholder values.
I'd put arrow keys as nice to have also, but not vital to meet a11y needs as long as tab/shift-tab and backspace work as expected.
Overall I just started looking at this, but it seems pretty robust and it's close but just needs a little tweaking to have really good accessibility support as well. If you're open for PRs, if I can find a few minutes I can see what I can do.
0x7061 commentedon Sep 30, 2025
+1