gatsbytutorials.com
gatsbytutorials.com copied to clipboard
Replace react-modal with @reach/dialog
Summary
On small screens, the tutorials take up the full width of the screen and the filters are accessed by opening a modal window that slides in from the right. We should make sure this modal component is as accessible as possible for all users.
Motivation
- @reach/dialog is more thoroughly tested for accessibility than other component libraries
- Screen reader accessibility in particular would be improved by swapping these libraries (please correct me if this is not accurate)
Alternatives
- Find a different way to access the filter lists on small screens so a modal window isn't necessary
Approach
- Install and import the
@reach/dialogdependencies (JS+CSS) - Create a copy of the modal with
@reach/dialogand verify it looks and works the same way - Remove the
react-modalimplementation and imports (JS+CSS) - Uninstall
react-modal