Designing Keyboard Accessibility for Complex React Experiences

• react-focus-lock

  1 1,229 8.3 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:

• styled-components

  223 40,115 8.4 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.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• reakit

  13 7,647 9.9 TypeScript

  Toolkit for building accessible web apps with React

  

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