Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#15,400 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
66/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, laravel, php
Área
accessibility, frontend

Línea de trabajo

Comienza en resources/js/components/ui/Combobox/Combobox.vue línea ~390 donde se enlaza aria-controls, y rastrea el mismo enlace en los componentes Popover, date field y command palette bajo resources/js/components/ui. Aplica el enlace condicional sugerido (omite el atributo cuando el id del popup está vacío) y verifica con la consulta de consola de los pasos de reproducción que no devuelve nodos, más una ejecución de axe-core en una entrada con campos de fecha y select. Listo significa que ningún elemento renderiza aria-controls="" en ningún lugar de la CP.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
PHP
Estrellas
4.9k
Forks
647
Merge medio
1 d 19 h
PR fusionados (30 d)
108

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de statamic/cms

Todos los issues de statamic/cms

Issues similares

Más issues de PHP

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.