React One-Time Password Input Component Accessibility

Accessibility

The one-time password input component is designed with accessibility in mind and follows WCAG guidelines for form inputs.

• ARIA Labels: Each input field automatically receives descriptive aria-label attributes
• Role Attribute: The container has role="group" to indicate related form controls
• Label click: clicking the label that names the group moves focus to the first empty slot, as clicking the label of an input focuses it
• Required: with required, every slot carries aria-required="true", since the value input that holds required is hidden from assistive technologies
• Keyboard Navigation: Full keyboard support with arrow keys, tab, and backspace
• Screen Reader Support: Clear announcements when values change; while the code is reported invalid, every slot carries aria-invalid="true" and the error message
• Focus Management: Automatic focus handling for seamless navigation
• Autofill: only the first field advertises autocomplete="one-time-code", so SMS autofill and password managers target a single field; a code delivered that way is spread across the slots automatically, exactly like a paste

Customizing accessibility

You can customize the aria-label generation function to provide more specific descriptions:

<COneTimePassword
  ariaLabel={(index, total) => `Enter digit ${index + 1} of your ${total}-digit verification code`}
>
  <COneTimePasswordInput />
  <COneTimePasswordInput />
  <COneTimePasswordInput />
  <COneTimePasswordInput />
</COneTimePassword>

Keyboard support

The one-time password input component provides comprehensive keyboard navigation support: