Designing Keyboard Accessibility for Complex React Experiences

1. react-focus-lock

   1 1 1,344 7.4 JavaScript

   It is a trap! A lock for a Focus. 🔓

   

   We're going to solve this by adding a focus trap via React Focus Lock to the modal. Focus will not be able to escape the focus trap until it is unmounted and the first focusable item will automatically focus:

2. Civic Auth

   www.civic.com featured

   Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

   

3. styled-components

   2 242 40,786 7.3 TypeScript

   Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

   

   For common components, I can't recommend Reakit enough. It's a keyboard accessible, unstyled component library with dialogs, popovers, and much more. I use it for all of my personal projects nowadays. Combined with Framer Motion for animation and Styled Components for styling, it's a killer mix.

4. reakit

   3 13 8,061 9.8 TypeScript

   Toolkit with accessible components, styles, and examples for your next web app

   

   For common components, I can't recommend Reakit enough. It's a keyboard accessible, unstyled component library with dialogs, popovers, and much more. I use it for all of my personal projects nowadays. Combined with Framer Motion for animation and Styled Components for styling, it's a killer mix.

Suggest a related project