Accessibility: Reflects text input behaviors about angular-code-input HOT 5 OPEN

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

from angular-code-input.

@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

from angular-code-input.

@KmBarnett ok, I will research.

from angular-code-input.

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:

Form elements must have labels
To solve this problem, you need to fix at least (1) of the following:

• Form element does not have an implicit (wrapped) <label>
  

• Form element does not have an explicit <label>
  

• aria-label attribute does not exist or is empty
  

• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  

• Element has no title attribute
  

• Element has no placeholder attribute
  

• Element's default semantics were not overridden with role="none" or role="presentation"
  

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?

from angular-code-input.

@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.

from angular-code-input.