angular / angular/components

feat(Listbox): Allow Listbox to be found in content projection

Offen
#26,556 3 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/listbox feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Feature Description

The Listbox cdk directive could be used as a select component's options. This would be nice because it has built in accessibilty features and keyboard interactions. The problem is if those select component options are content projected they cannot find their parent listbox directive.

### Use Case

So if I wanted my custom select component implementation to look like this:

![image](https://user-images.githubusercontent.com/26122765/216383475-edeaf89e-5798-49e3-b8fa-8b269a46cc19.png)

The custom select options are being content projected and the custom select logic would look something like this:

![image](https://user-images.githubusercontent.com/26122765/216383926-10a91b6e-005c-4e4d-8f55-edc2ac19f073.png)

The select option that is not content projected is working as expected but the content projected ones are not finding their parent listbox and therefore not behaving correctly.

Stackblitz for reference : https://stackblitz.com/edit/angular-ivy-tcfqrs?embed=1&file=src/app/select/select.component.ts

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten StackBlitz-Reproduktion und untersuche, wie die Listbox CDK directive für projizierte gegenüber nicht projizierten Optionen aufgelöst wird. Bestätige das Verhalten für das Beispiel mit der benutzerdefinierten Auswahl und überprüfe anschließend, dass content-projected options ihr übergeordnetes Listbox finden und die erwarteten Interaktionen für Barrierefreiheit und Tastatur beibehalten.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.