angular / angular/components

Autocomplete: when using the keyboard to navigate the options, the currently focused item should be the 'selected' option

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

説明

#### Bug, feature request, or proposal:
Feature request

#### What is the expected behavior?
When using the keyboard to navigate through the options, as the focus changes from one option to another, the selected option should be the currently focused option, thus following the "selection follow focus" principle as stated in the Material docs [here](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus).

If the desire is to leave the current behavior then at least provide an option to turn this behavior on.

#### What is the current behavior?
Using the keyboard to navigate the options does not automatically update the 'selected' option.

#### What is the use-case or motivation for changing an existing behavior?
Many users expect to be able to select an option by simply navigating the options without being required to press a particular key to indicate their selection. By simply leaving the current control after having navigating to a particular option, they assume that they have selected the option as well. The main example I have for this is using the TAB key. I often navigate options using the arrow key and then press the TAB key after having 'selected' my option using the arrow keys. The current behavior is such that you are required to 'select' the option using the ENTER key, otherwise the value is not set when you TAB away from the control.

Google's own search engine follows this principle. As you type in your search, Google begins searching for the phrase and provides several autocomplete phrases for you. If you navigate the provided phrases, the search results update based on the currently focused phrase without having pressed ENTER or another key.

#### Is there anything else we should know?
See [this](https://github.com/angular/material2/pull/4401) pull request for the initial discussion.

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

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

調査の方向性

まず、リンクされたプルリクエスト #4401 と既存の17件のコメントからなる議論を確認し、未解決の挙動の選択肢を理解します。次に、Angular Material autocomplete の実装をコンポーネントのエントリポイントからたどり、completion によってフォーカスを選択に追従させるべきか、その挙動のためのオプションを公開すべきかを判断します。完了条件は、選択した挙動が実装され、矢印キーによるナビゲーションの後に TAB を押す場合について検証され、既存の ENTER フローにも対応していることです。

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

評価

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

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

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