search

proksh / atomize

Design System for developers build on styled-components & React JS.
https://atomizecode.com/
Other
1.75k stars 339 forks source link

Accessibility #5

Closed woodybury closed 5 years ago

woodybury commented 5 years ago

Hi, atomize. Fan of your sketch library and excited to see this react library. However, there's a lot of missing accessibility on the interactive components. For example, the drop-down is rendered as a plain div with no role, tab-index, or aria to let a keyboard dependent user interact with it or know the state. Likewise, the focus is not sent to the modal component. Those are just two examples. Is accessibility in the roadmap? I'm happy to help.

ghost commented 5 years ago

Wasn't in the roadmap, but I think I will have to work on it soon. I will appreciate any contribution or help 😀. Thank you.

woodybury commented 5 years ago

Great. Do you prefer a component to start with?

proksh commented 5 years ago

You can start with the smaller components like Anchor & Buttons. Or you can send me some good article on this so that I can learn and start working on it :)

woodybury commented 5 years ago

Ok, I'll take the first pass at anchor and button this week. I really enjoy Heydon Pickering's "Inclusive components" https://inclusive-components.design. The React docs do a fantastic job highlighting common patterns and offering more resources, dev tools, etc: https://reactjs.org/docs/accessibility.html

proksh commented 5 years ago

Thanks for your help 😃

proksh commented 5 years ago

I have resolved some issues with the update along with some dependency changes. Please check out.

I will continue to improve the keyboard accessibility. Thanks :)