Skip to content

Feedback on adapting Angular aria combobox in a real application #68806

@jermowery

Description

@jermowery

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

Don't known / other

Is this a regression?

No

Description

I was talking @andrewseguin internally and he wanted to be the provide feedback on my recent attempt to integration the combobox into a real application.

Specifically, I wanted a searchable dropdown, luckily Angular provides almost all of the behavior for this in https://angular.dev/guide/aria/combobox#dialog-popup

That is fantastic and super appreciated it, the direction with @angular/aria is a really good one.

My requirement was to make this work with the standard material design themeing in our app and make it work with forms, specifically MatFormField and signal forms.

I ended up running into a few troubles with this that made me abandon this work:

  1. Making it work with material design
    1. The demo code for the material design version does not use any of the standard mat-sys variables from Angular Material. This is confusing on its own, but then I couldn't easily figure out how to map the styles to mat-sys variables. I think I could have worked through this by pulling up MatSelect and comparing the dom and computed styles. But it does seem like this ought to be easier from the Material variant in the documentation. Or at least more first-class support for @angular/aria integrating with material design
    2. To make my component adapting the example work with Material design I would need to make it work with MatFormField. This means implementing (or otherwise providing) MatFormFieldControl: https://material.angular.dev/guide/creating-a-custom-form-field-control. The problem here is that MatFormFieldControl doesn't use signals, but the example (and any code I would be writing in 2026) uses signals and effects. This makes it more than trivial to actually adapt and use. I could get passed this by carefully converting between signals and adapting the interface but it seems like there should be better support here. Looking at the above documentation is appears pretty neglected in general. There should probably be a signalized version of MatFormFieldControl
  2. Making it work with forms
    1. Our app exclusively uses signal forms, so we would want to implement FormValueControl (https://angular.dev/guide/forms/signals/custom-controls). This is also complicated by the fact that MatFormFieldControl doesn't use signals. Also, the example implementation is using template-driven forms, so we would have needed to change that underneath to use signal forms.
  3. Testing
    1. While not strictly necessary, the docs don't include any examples of testing controls built using @angular/aria. We could have made something work, but certainly an example of this would be very helpful.

Overall, I think the direction is really good, there could just be some more polish to make @angular/aria, particularly the examples in the documentation, work more easily with real apps

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw


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


Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: docsRelated to the documentationgemini-triagedLabel noting that an issue has been triaged by gemini

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions