soywod / react-pin-field

📟 React component for entering PIN codes.

https://soywod.github.io/react-pin-field/

MIT License

412 stars 24 forks source link

feat(PinField): increase input accessibility by using WAI-Aria attributes #84

Closed FranciscoKloganB closed 9 months ago

FranciscoKloganB commented 9 months ago

Description

Adds new prop to PinField component
- formatAriaLabel receives the current index and the codeLength allowing users to generate accessible strings for each of the inputs which are managed and not exposed by PinField.
- Exposing this function is important for customisation (users might not want to call it pin code) and for internationalisation (not all a11y users might be english speaking)
Adds respective unit tests
Adds markdown for repository's package documentation
Adds demo snippet toApp.jsx (needs to be uncommented) since it depends on live package versions which still do not have these changes.

Let me know if you require any changes and thanks for your efforts!

FranciscoKloganB commented 9 months ago

@soywod What do you think of this proposal?

ps: this changes are a blocker to use on my own projects, so I created a temporary package from the forked code until I get your feedback on this. Once again thank you for the awesome package.

soywod commented 9 months ago

Thanks for the improvement, it will be useful! I will publish a new version as soon as I can.

codecov-commenter commented 9 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (61abac3) 100.00% compared to head (e4f7f84) 100.00%.

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #84 +/- ## ========================================= Coverage 100.00% 100.00% ========================================= Files 5 5 Lines 182 185 +3 Branches 53 55 +2 ========================================= + Hits 182 185 +3 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

FranciscoKloganB commented 9 months ago

It's probably far from perfect. I am not an accessibility expert but I believe it has parity with ark-ui's pin-field at least in terms of aria-attributes. I will keep an eye out on the repo for requests related to this.

soywod commented 7 months ago

Sorry for the delay, the v3.1.5 is finally out. All the deployment went as expected, and the doc is up-to-date with your new property: https://soywod.github.io/react-pin-field/.