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

[bpmore]

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.

[bpmore]

Follow-up: this one looks like it belongs to reka-ui rather than Statamic.

The empty value comes from the root context's contentId, which is initialised to "" and only populated once the popup content mounts. The trigger binds it unconditionally:

// reka-ui dist/Combobox/ComboboxTrigger.js
"aria-controls": unref(rootContext).contentId,

// reka-ui dist/Combobox/ComboboxRoot.js
contentId: ""

Same pattern in Popover/PopoverRoot.js.

I checked 2.9.5 (the version pinned in package-lock.json) and 2.10.4 (current). Both still emit contentId: "", so unlike the checkbox issue in #15401 this one is not fixed by a version bump.

Two options as I see them:

1. Report it upstream to reka-ui, since the correct behaviour is to omit aria-controls entirely until the content element exists.
2. Work around it in Statamic by stripping empty aria-controls at the wrapper components.

Happy to open the reka-ui issue if that is useful, but wanted to check first whether you would rather handle it upstream yourselves. Leaving this open since the invalid attribute is still emitted by Statamic's CP either way.

[bpmore]

Update on the upstream question: this is already tracked at unovue/reka-ui#2597, so I've added Statamic's evidence there rather than opening a duplicate — unovue/reka-ui#2597 (comment)

Two things worth knowing here, because they change what the CP is actually shipping.

1. There are two bad states, not one. Reading aria-controls off a Select field's trigger through a full cycle on /cp/collections/{handle}/entries/{id}:

State	aria-expanded	aria-controls	Content in DOM?
before first open	false	""	no
open	true	"reka-combobox-content-v-2-0"	yes
after close	false	"reka-combobox-content-v-2-0"	no

reka's issue describes the third row. The empty string in the first row is what axe flags on the CP.

2. The command palette input never gets a valid value at all. ComboboxInput keeps aria-controls="" even while the listbox is open and in the DOM:

{ "inputAriaControls": "", "inputAriaExpanded": "true",
  "listboxId": "reka-combobox-content-v-5", "match": false }

Cause: contentId is provided as a plain string on the root context rather than a ref, so the assignment made when content mounts never triggers a re-render. ComboboxTrigger only picks it up incidentally, because it re-renders when open flips; ComboboxInput has no such trigger and renders once with "".

This also resolves the aria-required-attr violation I reported in #15399 — same root cause, not a separate defect.

Nothing to do on Statamic's side beyond tracking reka's fix, unless you'd want a temporary workaround stripping empty aria-controls at the wrapper components. Identical in 2.9.5 (your lockfile) and 2.10.4, so a version bump won't help this one.