angular / angular/components

bug(style): Custom palette's text hue not propagated to MDC styles

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

説明

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14.x

### Description

[Re-opening #26021 which was incorrectly closed as a duplicate of a similar but different issue]

[This is a regression insofar as the legacy non-MDC implementations do not have this problem]

Hi, after running the MDC schematic on one of my projects I have found that the MDC-based components do not use the `$text` hue specified in the theme config, which can cause accessibility issues for themes whose default hues do not provide sufficient contrast against a neutral background. In particular I have noticed this causes legibility issues for the floating placeholder on form fields and the label text on default-appearance buttons, but it might apply to other components as well.

My theme is configured as follows:

`$my-palette: mat.define-palette($greens, 600, 200, 900, 700);`
Note that the $text hue is overridden to `700` in the call to `define-palette`.

Here is a screenshot showing the 700 hue being correctly applied to the aforementioned text elements under the legacy components:

![image](https://github.com/angular/components/assets/4996462/2739e6f4-784d-41a3-81b6-4f4ee4741aa7)

And here is how the new MDC components look:

![image](https://github.com/angular/components/assets/4996462/a57571a7-f795-4c5a-8ba5-ba4d551d5b22)

I had a hard time reading the Angular Material => MDC SCSS theming code but it seems like the $text hue preference isn't being passed to the MDC mixins in any way.

### Reproduction

StackBlitz link:
Steps to reproduce:
1. https://stackblitz.com/edit/components-issue-9ugktp?file=src%2Fstyles.scss
2. Note that text hue is set to 900 but text button and form field label use 500

### Expected Behavior

MDC components should use specified text hue where applicable

### Actual Behavior

MDC components used primary hue regardless

### Environment

Environment
Angular: 15.0.0-18.0.1
CDK/Material: 15.0.0-18.0.1
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

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

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

調査の方向性

リンクされた StackBlitz の src/styles.scss から始め、mat.define-palette と MDC mixins 周辺の Angular Material MDC SCSS テーマ設定コードを追跡します。設定された $text hue について legacy と MDC の出力を比較し、その後、フォームフィールドのラベルやデフォルトボタンを含む該当する MDC テキスト要素が、再現例で指定された hue を使用していることを確認します。

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

評価

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

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

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