https://github.com/jansensan/cra-focus-visible
Example of how to use the focus-visible polyfill in a React project.
https://github.com/jansensan/cra-focus-visible
a11y a11y-react create-react-app focus focus-visible react
Last synced: about 1 month ago
JSON representation
Example of how to use the focus-visible polyfill in a React project.
- Host: GitHub
- URL: https://github.com/jansensan/cra-focus-visible
- Owner: jansensan
- Created: 2020-07-17T18:33:11.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-08-21T23:19:29.000Z (10 months ago)
- Last Synced: 2025-10-24T22:47:35.007Z (8 months ago)
- Topics: a11y, a11y-react, create-react-app, focus, focus-visible, react
- Language: JavaScript
- Homepage:
- Size: 837 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Using Create React App and `focus-visible`
This is an example of how to use the [`focus-visible` polyfill](https://github.com/WICG/focus-visible) in a React project.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Run this Project on Your Computer
### Install Dependencies
`yarn`
### Run the Project
- `yarn start`
- Go to in a browser
## References
- [Understanding Success Criterion 2.4.7: Focus Visible | W3C WCAG](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)
- [_Focus Ring!_ | A11ycasts #16 - YouTube](https://www.youtube.com/watch?v=ilj2P5-5CjI)
- [`:focus-visible` pseudo-class | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
- [`focus-visible` polyfill | GitHub](https://github.com/WICG/focus-visible)
- [Create a New React App | React](https://reactjs.org/docs/create-a-new-react-app.html)
### Related Readings and Content
- [The Accessibility of Styled Form Controls | GitHub](https://github.com/scottaohara/a11y_styled_form_controls)
- [Most Common HTML Elements | GitHub](https://github.com/jansensan/most-common-html-elements)