Skip to content

Sheet focus trap: Tab escapes during the open tween, and the backdrop is an unnamed button #310

Description

@HMarzban

Problem

Two gaps remain in the BottomSheet focus trap from #248:

  1. Tab can leave a sheet before onOpenEnd, while the open tween runs. A probe saw focus reach a focus guard and the backdrop.
  2. The react-modal-sheet 5.6.0 backdrop renders as an unlabeled <button> when it has onTap. It sits in the tab order, and screen readers announce it with no name.

Fix

  • Arm the trap, or move focus into the sheet, before the tween ends.
  • Give the backdrop aria-hidden and tabIndex={-1}, or an accessible name such as "Close sheet". Check the react-modal-sheet API first.

Check

At 390x844, open a sheet and press Tab at once, 15 times. Focus stays inside the sheet. The backdrop is not a Tab stop.

Part of #249.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    MobileUIbugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions