Skip to content
This repository was archived by the owner on Mar 20, 2024. It is now read-only.
This repository was archived by the owner on Mar 20, 2024. It is now read-only.

Accessibility: filter modal #214

@gmrabian

Description

@gmrabian

Describe the bug

  • There is no focus trapping. Someone on a keyboard can easily exit the modal accidentally. Using tab navigation, focus should go to the close button after the last interactive element in the modal. Tabbing backwards, it should focus on the last button after the close button.
  • All page content behind the modal is still available to screen readers. You would need to disable everything but the modal with aria-hidden=”true” while the modal is open and remove that attribute when the modal is closed.
  • When the modal is opened, you need to transfer focus either to the modal body or the modal heading. There’s no feedback for the screen read when I open the modal.
  • Hitting the apply filters should transfer focus back to the button that opened it
  • The USWDS modal does all of the these things

To Reproduce
Steps to reproduce the behavior:

  1. Go to the home page
  2. Click on "Add filters"
  3. Tab around

Expected behavior
Modal holds focus and has logical linking to and from the app, including announcements

Definition of Done

Definition of Done

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions