angular / angular/components

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

オープン
#26,556 コメント 3 件 リアクション 7 件 担当者 0 名 GitHub で見る
area: cdk/listbox feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### 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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz の再現コードから始め、投影されたオプションと投影されていないオプションで Listbox CDK directive がどのように解決されるかを調べてください。カスタムセレクトの例での動作を確認し、続いて content-projected options が親の Listbox を見つけ、期待されるアクセシビリティとキーボード操作を維持することを検証してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
accessibility, frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。