Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace react-modal with @reach/dialog #21

Open
ooloth opened this issue Jul 21, 2019 · 0 comments
Open

Replace react-modal with @reach/dialog #21

ooloth opened this issue Jul 21, 2019 · 0 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@ooloth
Copy link
Owner

ooloth commented Jul 21, 2019

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 ooloth added enhancement New feature or request good first issue Good for newcomers labels Jul 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

1 participant