アクセシビリティのリファレンスとして、リストボックスポップアップを備えたWAI-ARIAコンボボックスからのベストプラクティスの推奨事項を検討してください

APIプロポーザルコンボボックス

高度な構造

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

入力

| 名前| タイプ| 説明|
| ------------- | ------------- | ------------- |
| value | string \| undefined | 入力の初期値|
| placeholder | string \| undefined | 入力のプレースホルダー|

出力

| 名前| タイプ| 説明|
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | 新しい値が選択されたときに発行されるイベント|
| filterChanges | EventEmitter<string> | フィルタが変更されたときに発行されるイベント|

コンテンツの投影
dt-オプション
dt-optgroup

チェックリスト

• []適切なキーボードサポート（矢印：上下）
• [] WAI-ARIA
• [] ngFormsの互換性を検討する
• []検証を検討する

ねえ@ lukett89 、APIの提案をありがとう。 本当に素晴らしい出発点。
dt-selectとまったく同じ入力が必要になると思います。

追加します
| 名前| タイプ| 説明|
| ------------- | ------------- | ------------- |
| id | string | 選択のID |
| compareWith | (v1: T, v2: T) => boolean | オプション値を選択した値と比較する関数|
| required | boolean | 入力が必要かどうか|
| panelClass | string | コンボボックスのドロップダウンにクラスが追加されました|

「opened」のような開いた状態のゲッターを追加し、その状態が変化したときに出力することも検討する必要があります。
選択に最も近いAPIに固執して、どちらか一方をできるだけ簡単に切り替えることができれば有益だと思います。

返信ありがとうございます@ ffriedl89。
コンポーネントの最初のバージョンについて言及したすべての入力/出力を考慮に入れます。

最終的なAPI提案コンボボックス

高度な構造

<dt-combobox [value]="initialValue" (valueChanges)="fn($event)" (filterChanges)="fn($event)" [placeholder]="'Type here for filter'">
   <dt-option *ngFor="let option of options">{{ option.value }} </dt-option>
</dt-combobox>

入力

| 名前| タイプ| 説明|
| ------------- | ------------- | ------------- |
| value | string \| undefined | 入力の初期値|
| placeholder | string \| undefined | 入力のプレースホルダー|
| id | 文字列| 選択のID |
| compareWith | (v1: T, v2: T) => boolean | オプション値を選択した値と比較する関数|
| required | boolean | 入力が必要かどうか|
| panelClass | string | コンボボックスのドロップダウンにクラスが追加されました|

出力

| 名前| タイプ| 説明|
| ------------- | ------------- | ------------- |
| valueChanges | EventEmitter<string> | 新しい値が選択されたときに発行されるイベント|
| filterChanges | EventEmitter<string> | フィルタが変更されたときに発行されるイベント|
| openedChange | EventEmitter| 選択パネルが切り替えられたときに発行されるイベント。 |

コンテンツの投影
dt-オプション
dt-optgroup

チェックリスト

• []適切なキーボードサポート（矢印：上下）
• [] WAI-ARIA
• [] ngFormsの互換性を検討する
• []検証を検討する

今後2週間以内にこの機能の実装を担当したいと思います。 問題を私に割り当ててもらえますか？

同期と@heartdiseaseと@ lukett89との話し合いの後、私は問題を再割り当てしています。

さらに2つの入力を追加することを提案します。
| 名前| タイプ| デフォルト値| 説明|
| --- | --- | --- | --- |
| 読み込み中| boolean | false | trueに設定すると、データが現在ロード/フィルタリングされていることをユーザーに示すために、ロードインジケーターが表示されます。
| displayWith | (value: T) => string | (value: T) => $ {value} `` | コンボボックスからのオプションを表す、指定されたオブジェクトの表示名を返す関数|

displayWith関数は、オブジェクトでコンボボックスを使用することに関連しており、ロードインジケーターは、ほとんどの場合、サーバー側にフィルタリングをオフロードするコンポーネントに対して保証されているようです。