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:

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

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

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

Because the outer combobox renders aria-controls="", Axe reports this as an accessibility violation. According to MDNaria-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: aria/comboboxarea: 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