angular / angular/components

bug(mat-form-field): when subscript sizing is set to fixed, not all hint or error text is visible

オープン
#33,510 コメント 2 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: material/form-field gemini-triaged
主要言語
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

When Form Field subscript sizing is set to fixed, and the hint or error text wraps to multiple lines, the hint or error text may not be visible to the user causing accessibility issues:

Image

This issue does not occur when subscript sizing is set to dynamic, but the dynamic is not the default and is argued against in your documentation, and does not have reserved space for the hint or error text causing the dynamic subscript sizing to look off with not enough spacing at the bottom or between Form Fields, and there's additional issue with the dynamic subscript sizing where it affects the width of the Form Field:

Image

Does that look right to you? It does not to me, but at least it is accessible unlike fixed subscript sizing

Ideally, there should be a subscript sizing option that both has a min height and that can expand into more space when hint or error text does not fit in one line

### Reproduction

StackBlitz link: https://stackblitz.com/edit/lyvjfmdq?file=src%2Fexample%2Fform-field-overview-example.html

### Expected Behavior

All hint or error text is visible

### Actual Behavior

Not all hint or error text is visible

### Environment

- Angular: v22
- CDK/Material: v22
- Browser(s): Any
- Operating System (e.g. Windows, macOS, Ubuntu): Any

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

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

調査の方向性

Start with the StackBlitz reproduction at src/example/form-field-overview-example.html and compare fixed and dynamic subscript sizing with wrapping hint and error text. Trace the Angular Material form-field implementation responsible for subscript layout, then verify that fixed sizing keeps its reserved space while making all hint or error text visible without the reported dynamic-sizing issues.

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

評価

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

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

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