Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

aria-controls is emitted as an empty string on comboboxes, popovers and date pickers

未关闭
  • 哪里不对？
#15,400 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
66/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
javascript, laravel, php
领域
accessibility, frontend

调研方向

从 resources/js/components/ui/Combobox/Combobox.vue 约第 390 行 aria-controls 绑定处开始，然后在 resources/js/components/ui 下的 Popover、date field 和 command palette 组件中追踪相同的绑定。应用建议的条件绑定（当 popup 的 id 为空时省略该属性），并用复现步骤中的控制台查询返回无节点来验证，同时对包含 date 和 select 字段的条目运行一次 axe-core。完成的标准是 CP 中任何地方都不再渲染 aria-controls=""。

由索引模型根据 Issue 内容生成。

描述

accessibility
Bug description

Popup triggers across the CP render aria-controls="" — an empty string — when their popup element has not been created yet.

An empty aria-controls is an invalid attribute value, not a neutral one. Assistive technology is told a controlling relationship exists and then cannot resolve the target.

axe-core reports aria-valid-attr-value (critical, needs-review) on 25 nodes across 9 CP screens.

Examples:

<!-- date picker -->
<button aria-label="Open calendar" aria-haspopup="dialog" aria-expanded="false" aria-controls="">

<!-- combobox trigger -->
<div tabindex="0" aria-haspopup="listbox" aria-expanded="false" aria-controls="">

<!-- generic popover -->
<button data-ui-popover-trigger aria-haspopup="dialog" aria-expanded="false" aria-controls="">

<!-- command palette input -->
<input role="combobox" aria-autocomplete="list" aria-controls="">

Affects Combobox, Popover, the date field, and the command palette. There is a closed issue from the 3.x era on the same theme for SVGs (#2605), so this pattern has come up before.

WCAG 2.1 SC 4.1.2 Name, Role, Value (Level A).

How to reproduce
  1. composer create-project statamic/statamic
  2. Add a date field and a select field to a blueprint, open an entry
  3. In the console:
[...document.querySelectorAll('[aria-controls=""]')].map(e => e.outerHTML.slice(0, 120))

Returns the date-picker trigger and the select trigger, among others.

Suggested fix

Omit the attribute entirely until the popup element exists, rather than binding it to an empty string — i.e. :aria-controls="popupId || undefined" at the points where these are bound.

Since most of these come through reka-ui primitives, the fix may belong in how Statamic configures them (or may be worth an upstream report there).

Related: https://github.com/statamic/cms/blob/v6.31.0/resources/js/components/ui/Combobox/Combobox.vue#L390

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.

主要语言
PHP
星标
4.9k
派生
647
平均合并
1 天 10 小时
30 天内合并 PR
137

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

statamic/cms 的其他 Issue

查看 statamic/cms 的全部 Issue

相似的 Issue

更多 PHP Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。