palantir/blueprint

Incorrect Tab order for popover of DateInput2

Open

#6,034 创建于 2023年3月20日

在 GitHub 查看
 (4 评论) (0 反应) (0 负责人)TypeScript (20,263 star) (2,167 fork)batch import
Domain: accessibilityP1Package: datetimeType: bughelp wanted

描述

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.

贡献者指南

技术栈
typescriptreact
领域
frontendaccessibility
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
Reactfocus managementaccessibility basics
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
75
研究方向
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.