jansensan / cra-focus-visible

Example of how to use the focus-visible polyfill in a React project.

Using Create React App and focus-visible

This is an example of how to use the focus-visible polyfill in a React project.

This project was bootstrapped with Create React App.

Run this Project on Your Computer

Install Dependencies

yarn

Run the Project

• yarn start
• Go to http://localhost:3000/ in a browser

References

• Understanding Success Criterion 2.4.7: Focus Visible | W3C WCAG
• Focus Ring! | A11ycasts #16 - YouTube
• :focus-visible pseudo-class | MDN
• focus-visible polyfill | GitHub
• Create a New React App | React

Related Readings and Content

• The Accessibility of Styled Form Controls | GitHub
• Most Common HTML Elements | GitHub

cra-focus-visible's Issues

Investigate if possible to *not* use public directory

Current
The dependency on focus-visible.min.js has to be added as <script>, as per this article: https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/using-the-public-folder.md This makes it hard to maintain if the lib ever gets updated.

Expected
Find a way to automate the dependency somehow.