ODrawer 会抑制打开时聚焦,对于没有表单字段或主按钮的抽屉
作者: neha00290创建于 2026年9月13日更新于 2026年9月17日
□ 总结
`ODrawer'取消了Reka-ui的焦点打开,然后,对于内容既非窗体字段又非主页脚按钮的抽屉,则不突出重点。 焦点停留在原地,所以键盘或屏幕阅读器的用户得不到任何显示抽屉出现的迹象,除了盲目地从后面的页面中取出任何入手.
这是一个共享组件缺陷,并非一个特性所特有的.
□ 复制步骤
- ** 提醒** − 创建两个预定的警报和一个复合器。
- 在列表中,打开孩子的"QQ菜单" 删除 OK. 拒绝删除,并打开综合参考资料抽屉。
- 不接触鼠标,按Enter。
** 预期:** 焦点位于抽屉内(在它的严密控制下),因此Enter将其删除。
** 实际:** 焦点仍然放在抽屉后面的提醒列表搜索输入上——document.activeElement'是INPUT[data-test='aert-list-search-input-field']',所以Enter对它一无所取.
提醒设置帮助抽屉行为相同:只读内容,没有主动作,焦点从不输入.
□因缘.
web/src/lib/overlay/Drawer/ODrawer.vue',andle OpenAutoFocus':
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你来干什么? 函数处理 OpenAutoFocus(活动) { event. prevent Default (); // 取消 Reka- ui 自己的焦点定位 下一个 Tick( ()) {{{ // 1. 抽屉内的第一个输入/文本区域 // 2. 其它主要参考文献
- ; {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?
两种倒计时都可能同时错失:车体查询只匹配 " 输入 " / " 文本区 " ,因此,一个抽屉中包含的按钮、链接或只读内容不匹配任何内容;以及 " primeBtn Ref " 被接入一个被制成"v-if="primeButtonLabel"的按钮上,因此没有主动作的抽屉没有对应内容. 当两者都失手时,`预防缺陷() ' 已经运行,没有`.焦点()'之后,重点被积极**压制**,而不仅仅是未指定。
恰好包含文本字段或声明主按钮的绘图器被意外地救出,这就是为什么这一点不被注意的原因.
□为什么`自动聚焦'不能拯救它
`综合参考文件Drawer ' 将`自动聚焦 ' 置于关闭按钮上。 赤裸的HTML属性对于在解析后插入的内容并不可靠——它保存在本地运行中,从未在CI中发过火,这使得症状看起来像一团一团一团,而不是一个缺陷.
□ 建议修正
只有`预防缺陷',即一个目标实际上将集中,或增加最后的倒计时:消费者宣布的`[自动聚焦]'要素,然后用`tabindex='-1'(雷卡-伊本会做什么)的面板本身。 然后消费者可以放弃`自动聚焦 ' 属性。
E2E后卫:在"测试/ui-testing/ playwright-tests/Alerts/aerts-composite-list.spec.js"中的"A6b".内容来源: openobserve/openobserve