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

Skin Tone Accessibility Updates #317

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

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.

src/dataUtils/skinTone.ts Outdated Show resolved Hide resolved
src/components/header/SkinTonePicker.tsx Outdated Show resolved Hide resolved
src/components/header/SkinTonePicker.tsx Outdated Show resolved Hide resolved
@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.

None yet

2 participants