Skip to content

Replace react-modal with @reach/dialog #21

@ooloth

Description

@ooloth

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions