palantir/blueprint

Incorrect Tab order for popover of DateInput2

Open

#6034 opened on Mar 20, 2023

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Domain: accessibilityP1Package: datetimeType: bughelp wanted

Description

Environment

  • Package version(s): @blueprintjs/datetime2: 0.9.24
  • Operating System: mac OS
  • Browser name and version: I can replicate the bug in the latest versions of Chrome, Edge and Safari.

Code Sandbox

Link to a minimal repro

Actual behavior

When you have focus in the DateInput2 field and the popover is open and you click the tab keyboard key, you are moved to the next input field (not into the date selector in the popover).

The bug makes it hard to fill out forms only using the keyboard and poses accessibility issues. Focus can be moved to an input field behind the popover which is confusing.

https://user-images.githubusercontent.com/12937146/226369552-12524037-f318-4005-b6b0-cd9150e8484e.mov

Expected behavior

I would expect behavior similar to the DateInput (see beginning of the video). When you have focus in the input field and the popover is open and you click the tab keyboard key I would expect focus to be put on the first button on the date selector popover.

Possible solution

Update tab order, so that the inputs in the data selector is not put in the end.

Contributor guide

Tech stack
typescriptreact
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Reactfocus managementaccessibility basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Investigate the focus handling in the DateInput2 component and its popover. Compare with the DateInput component to understand the expected tab order. Look for the component's source code, likely in packages/datetime2/src/, focusing on keyboard event handlers or focus management logic. The existing behavior suggests that the popover is not trapping focus properly; the fix may involve adjusting tabIndex or using a container to manage focus order.