bug(FormField): Tabbing to then out of form field with "required" validator shows validation error.
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
Premature error validation occurs when tabbing from the form field text entry section to the datepicker button. From an A11Y and usability perspective, this should not occur until the user has left the containing form field and button since the datepicker button is a valid way of filling out the form field.
### Reproduction
**StackBlitz link:** https://components-issue-zzukvj.stackblitz.io
**Steps to reproduce:**
1. Add Datepicker to app from angular material code example
2. Add required validator to form control
3. Tab from the form field section to the datepicker button
4. Error shows, despite not having left the control
### Expected Behavior
Required validation does not occur when tabbing from the text entry section of the datepicker to the calendar pop-out button.
It should only occur when tabbing out of the containing form field and button.
### Actual Behavior
Required error validation occurs when tabbing from the text entry section of the datepicker to the open calendar button
### Environment
- Angular: 15.2.4
- CDK/Material: 15.2.5
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS, Windows
コントリビューションガイド
調査の方向性
まず、required form control を使用する Angular Material datepicker で、リンク先の StackBlitz の動作を再現し、その後 datepicker と form-field の実装を調査します。テキスト入力からカレンダーボタンへ Tab 移動しても required エラーが表示されず、両方から離れると引き続きバリデーションが実行されれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100