Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Nov 16, 2023

Conversation

FranciscoKloganB
Copy link
Contributor

@FranciscoKloganB FranciscoKloganB commented Nov 15, 2023

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
Copy link
Contributor Author

FranciscoKloganB commented Nov 15, 2023

@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
Copy link
Owner

soywod commented Nov 16, 2023

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

@codecov-commenter
Copy link

Codecov Report

All modified and coverable lines are covered by tests ✅

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

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

Additional details and impacted files
@@            Coverage Diff            @@
##            master       #84   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            5         5           
  Lines          182       185    +3     
  Branches        53        55    +2     
=========================================
+ Hits           182       185    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@soywod soywod merged commit 04dd1b8 into soywod:master Nov 16, 2023
3 checks passed
@FranciscoKloganB
Copy link
Contributor Author

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
Copy link
Owner

soywod commented Jan 5, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants