gatsbytutorials.com icon indicating copy to clipboard operation
gatsbytutorials.com copied to clipboard

Replace react-modal with @reach/dialog

Open ooloth opened this issue 6 years ago • 0 comments

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/dialog dependencies (JS + CSS)
  • Create a copy of the modal with @reach/dialog and verify it looks and works the same way
  • Remove the react-modal implementation and imports (JS + CSS)
  • Uninstall react-modal

ooloth avatar Jul 21 '19 21:07 ooloth