Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#15,400 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
66/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, laravel, php
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu từ resources/js/components/ui/Combobox/Combobox.vue dòng ~390 nơi aria-controls được gắn, rồi lần theo cùng cách gắn đó trong các component Popover, date field và command palette dưới resources/js/components/ui. Áp dụng cách gắn có điều kiện được đề xuất (bỏ qua thuộc tính khi id của popup trống) và xác minh bằng truy vấn console từ các bước tái hiện trả về không có nút nào cùng với một lần chạy axe-core trên một mục có field date và select. Hoàn thành nghĩa là không có element nào render aria-controls="" ở bất kỳ đâu trong CP.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
PHP
Star
4.9k
Fork
647
Merge trung bình
1 ngày 19 giờ
Pull request đã merge (30 ngày)
108

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của statamic/cms

Tất cả issue của statamic/cms

Issue tương tự

Thêm issue về PHP

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.