Command palette listbox and combobox ARIA is invalid when open
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 70/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- javascript
调研方向
Start with resources/js/components/command-palette/CommandPalette.vue, referenced at v6.31.0, and inspect the combobox, ComboboxContent, dialog, and results viewport. Open the palette and run axe-core to confirm the reported violations. Done means the listbox has valid children and an accessible name, the dialog is modal, the viewport is keyboard-focusable, and the empty aria-controls issue is resolved.
由索引模型根据 Issue 内容生成。
描述
Bug description
The command palette (Cmd/Ctrl+K) gets the hard parts right — role="dialog", focus moved inside, the rest of the page inert, Escape closes — but the combobox and listbox inside it are not valid ARIA. Four Level A violations fire the moment it opens.
axe-core on the open palette:
| Rule | Impact | Detail |
|---|---|---|
aria-required-children |
critical | role="listbox" contains a <footer> |
aria-required-attr |
critical | role="combobox" has no usable aria-controls |
aria-input-field-name |
serious | the listbox has no accessible name |
scrollable-region-focusable |
serious | the results viewport scrolls but cannot take focus |
Offending elements:
<input role="combobox" aria-expanded="true" aria-controls="" aria-autocomplete="list"
placeholder="Search or jump to...">
<div role="listbox" aria-orientation="vertical" aria-multiselectable="false"
id="reka-combobox-content-…" tabindex="-1">
<div class="max-h-[360px] min-h-[360px] overflow-y-auto" data-reka-combobox-viewport role="presentation">
The dialog also has no aria-modal="true":
Because the palette is the primary keyboard navigation affordance in the CP, this is the one place where broken ARIA hurts keyboard-first users most.
WCAG 2.1 SC 4.1.2 Name, Role, Value (Level A). The scrollable region is SC 2.1.1 Keyboard.
How to reproduce
composer create-project statamic/statamic, log in- Press Cmd+K (or Ctrl+K)
- Run axe-core against the page with the palette open, or inspect the elements above
Suggested fix
- Move the
<footer>outsideComboboxContentso therole="listbox"element only contains option/group children, and give the listbox an accessible name. - The
aria-required-attrfailure is the emptyaria-controlsreported in #15400, not a separate defect. Fixing that fixes this too. - Add
aria-modal="true"to the dialog. - Put
tabindex="0"on the scrollable results viewport so keyboard users can scroll it.
Related: the empty aria-controls here is the same defect reported separately for comboboxes and popovers.
Environment
Environment
Laravel Version: 13.30.1
PHP Version: 8.4.23
Composer Version: 2.10.2
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: en
Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED
Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: log
Queue: sync
Session: file
Storage
public/storage: NOT LINKED
Statamic
Addons: 0
License Key: Not set
Sites: 1
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.31.0 PRO
Installation
Fresh statamic/statamic site via CLI
Additional details
Found during a WCAG 2.1 AA audit of a vanilla composer create-project statamic/statamic install with no addons and no custom code. Tested with axe-core 4.x on Chromium 153 at 1440x1000, plus manual keyboard traversal. Source references point at v6.31.0.
Correction (see comment below): I originally described the aria-required-children failure as an empty listbox and aria-required-attr as an unnamed missing attribute. Both were imprecise; the table and suggested fixes above have been updated with axe's actual output.
- 主要语言
- PHP
- 星标
- 4.9k
- 派生
- 647
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 100
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
statamic/cms 的其他 Issue
-
难度 1/5 1 小时以内 新手友好度 82/100
维护者通常 1 天内回复
-
There's a default crop when cropping images可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭assets
难度 2/5 1-3 小时 新手友好度 65/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 74/100
维护者通常 1 天内回复
-
accessibility
难度 2/5 1-3 小时 新手友好度 74/100
维护者通常 1 天内回复
-
antlers
难度 2/5 1-3 小时 新手友好度 66/100
维护者通常 1 天内回复
相似的 Issue
-
难度 1/5 1 小时以内 新手友好度 84/100
WordPress/hosting-handbook#506 ·
维护者通常 2 天内回复
-
Installing a plugin with composer_packages installs dev dependencies and breaks the autoloader (Error 500)可能已有人在做 @Boy132 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 76/100
维护者通常 1 天内回复
-
nginx: static-file locations drop the security headers, and the dotfile deny is matched after them未关闭bug Low Security
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 78/100
backdrop-contrib/commerce#60 ·
-
难度 1/5 1 小时以内 新手友好度 76/100