TanStack / TanStack/tanstack.com
Define focus restoration for controlled dialogs
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 1.1k
- 派生
- 401
- 平均合并
- 18 小时 14 分钟
- 30 天内合并 PR
- 56
描述
Evidence
Merged PR #1205 moved shipping overlays onto the shared Radix-backed Dialog, but the controlled-dialog call sites do not register an opener with DialogTrigger.
Current source has 16 controlled Dialog roots and no shipping DialogTrigger usage. Radix stores the trigger in context.triggerRef, then its modal onCloseAutoFocus handler prevents the browser default and calls context.triggerRef.current?.focus(). Without a registered trigger, that ref is null, so keyboard focus is not restored to the control that opened the dialog.
This is straightforward for colocated single openers, such as the NPM baseline package picker. It is not one mechanical change for every caller:
- Some dialogs are controlled by an opener in a parent component.
- The admin role removal dialog has one dynamic opener per table row.
- Some design-system examples currently keep their opener outside the
Dialogroot.
Repeated title, body, keyword, and open-PR searches found no existing owner. Issue #775 tracks unrelated empty-name, label, landmark, and skip-navigation findings.
Expected impact
Closing a dialog should return keyboard and assistive-technology users to the control that opened it. Falling back to the document body loses their place and makes repeated actions harder.
Proposed direction
Adopt one explicit controlled-dialog focus contract:
- Require
DialogTrigger asChildfor dialogs with one colocated opener. - Add a typed shared API for external or dynamic openers, such as an explicit restore-focus ref or a narrowly exposed Radix close-auto-focus callback.
- Add a browser-level regression test that opens a dialog, closes it with Escape and the close button, and verifies focus returns to the actual opener.
Alternatives and tradeoffs
- Requiring
DialogTriggereverywhere keeps the shared API smallest, but dynamic table-row openers would need dialog state and content moved per row or another structural change. - Restoring the previously active element automatically inside
DialogContentreduces call-site work, but it changes every dialog and can restore focus to a stale or unrelated node when opening is indirect. - Exposing only
onCloseAutoFocusmatches Radix directly, but every caller must repeat the same focus logic and the shared primitive cannot enforce consistency.
Decision needed
@tannerlinsley, should the shared controlled-dialog contract support both DialogTrigger for colocated openers and an explicit restore-focus ref for external or dynamic openers, or should every dialog be restructured so one DialogTrigger always owns the opener?
Source: #1205
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
首先检查 16 个受控的 Dialog 根,包括 NPM 基线包选择器、管理员角色移除对话框以及 design-system 示例。将它们的 opener 布局与共享的基于 Radix 的 Dialog 进行比较,并在待定决策解决后定义 contract。完成的标准是:已实现选定的焦点恢复行为,并且浏览器级回归测试验证在 Escape 和通过关闭按钮关闭后焦点会返回。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- typescript
- 领域
- accessibility, frontend
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 活跃
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100