Skip to content

Conversation

@neckenth
Copy link

In this PR, I added a few changes to assist with keyboard accessibility and general usage of the Skin Tone Picker.

1 - Unrelated: Adds an aria-label to the Clear Search "x" button
2 - Adds functionality to persist selected skin tone in localStorage
3 - Allows a user to tab into the Skin Tone Picker
4 - Adds a prop, fanOutDirection to the <SkinTonePicker /> component to maintain the default fan-out behavior - which keeps the selected tone in-place and fans all remaining colors to to the left - and adds an option to specify the opposite, where colors will fan out to the right of the selected tone. The goal here was to aid with tab-ability and not interrupt the left --> right tab flow.

skin_tone_accessibility.mov

@ealush
Copy link
Owner

ealush commented Jan 14, 2023

Thank you for taking the time to improve the picker @neckenth!
I have been a bit sick in the past week, so I wasn't yet able to look at the code, but at least in terms of usability this looks great.

I'll take a deeper look in the upcoming days, sorry for the delay.

Copy link
Owner

@ealush ealush left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @neckenth, I left a few comments. Let's sort these out before we can continue.

@neckenth neckenth requested a review from ealush March 2, 2023 19:57
@neckenth
Copy link
Author

neckenth commented Mar 2, 2023

Hey @neckenth, I left a few comments. Let's sort these out before we can continue.

Hey @ealush, thank you for these comments, and I apologize for the delay. Just responded to your code review. Please let me know your thoughts!

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.

2 participants