Skip to content

Combobox sets an empty aria-controls attribute when using a dialog popup #33640

Description

@TomSchrier

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

This happens in the @angular/aria package using the Combobox directives.

I am following the Dialog popup example on angular.dev to implement a combobox with a popup containing a searchable listbox.

When the popup is opened, the outer combobox receives an aria-controls attribute with an empty value:

<div
  role="combobox"
  aria-expanded="true"
  aria-haspopup="listbox"
  aria-controls=""
>

The popup itself contains a second combobox (the search input), which correctly references the listbox:

<input
  role="combobox"
  aria-controls="ng-listbox-..."
/>

Because the outer combobox renders aria-controls="", Axe reports this as an accessibility violation. According to MDN aria-controls should be set to the id of the popup. I assume this is the element containing the ComboboxPopup or ComboboxWidget directive.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-cc2eb68f

Please provide the exception or error you saw


Please provide the environment you discovered this bug in (run ng version)

Angular CLI       : 22.1.2
Angular           : 22.1.0
Node.js           : 24.16.0
Package Manager   : pnpm 11.19.0
Operating System  : darwin arm64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular/aria                     │ 22.1.0            │ ^21.0.5           │
│ @angular/build                    │ 22.1.2            │ 22.1.2            │
│ @angular/cdk                      │ 22.1.0            │ ^21.0.5           │
│ @angular/cli                      │ 22.1.2            │ 22.1.2            │
│ @angular/common                   │ 22.1.0            │ ^22.0.0           │
│ @angular/compiler                 │ 22.1.0            │ ^22.0.0           │
│ @angular/compiler-cli             │ 22.1.0            │ 22.1.0            │
│ @angular/core                     │ 22.1.0            │ ^22.0.0           │
│ @angular/forms                    │ 22.1.0            │ ^22.0.0           │
│ @angular/platform-browser         │ 22.1.0            │ ^22.0.0           │
│ @angular/platform-browser-dynamic │ 22.1.0            │ ^22.0.0           │
│ @angular/router                   │ 22.1.0            │ ^22.0.0           │
│ rxjs                              │ 7.8.2             │ ~7.8.2            │
│ typescript                        │ 6.0.3             │ ~6.0.3            │
└───────────────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtimegemini-triagedLabel noting that an issue has been triaged by gemini

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions