Add a "focus on first tab" option to FocusTrap in CDK
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
#### Bug, feature request, or proposal:
Proposal
#### What is the expected behavior?
For dialogs and other containers such as drawers, menus etc. When the dialog or container is initialized to receive focus, instead of focusing the first tabbable element or the cdkFocusInitial directive's element, do not focus any element. Instead focus the first element upon the first tab or the last element upon shift-tab.
#### What is the current behavior?
Currently when using cdkFocusRegionStart and cdkFocusRegionEnd, the first tabbable element with the focus trap region receives initial focus. The cdkFocusInitial directive allows changing which component, but there is no mechanism to have no element initially focused. There are often use cases when no initial focus is a preferred behavior (e.g. dialogs where the primary action is non-reversible such as a delete operation).
#### What is the use-case or motivation for changing an existing behavior?
To support use cases where no initial focus is an important UX concern.
#### Is there anything else we should know?
This could be low effort. It appears that the wiring already in FocusTrap could easily support this. A new directive such as 'cdkFocusInitialTab' could be added to be the focus target on initial tab, and code changes made so that initial focus to the first tabbable element is not automatically applied when that directive is used. Usage could be something like:
```
First
...
Last
```
コントリビューションガイド
調査の方向性
CDK の FocusTrap 実装と、issue に記載されている cdkFocusRegionStart/cdkFocusRegionEnd および cdkFocusInitial の配線から始めます。初期フォーカスがどのように選択されるかを追跡し、その後、提案されている cdkFocusInitialTab の動作を定義してテストします。これにより、前方向の Tab では最初の要素に到達し、Shift-Tab では最後の要素に到達する一方で、最初に要素へフォーカスが設定されないようにします。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- accessibility, frontend
- issue の種類
- 機能追加
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100