You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
18.0.x
Description
In Angular Material 18.1.x, when using a Material 3 theme, the mat-divider component uses the outline token instead of the outline-variant as specified by the Material 3 guidelines. This change caused sections in our application to appear more prominent than expected. Additionally, this creates inconsistency in places where we combine custom styles that set the color of outlines by using the outline-variant role from the theme, and also have mat-dividers within.
I understand that the change from #28995 is to achieve better color contrast. However, this deviates from the specification, which explains that dividers are decorative elements and have no minimum contrast requirements.
A potential workaround can be to use the --mat-divider-color property and set color to the outline-variant token, but it would be nice if there is no need for style changes.
It's true that the divider no longer matches the spec. However this is because the spec is out of date with internal Google guidelines that govern contrast ratios for non-text elements. This change to darken the outline was made to ensure the divider is accessible for all users. The workaround of overriding the divider is recommended if it appears too dark in your application
Is this a regression?
The previous version in which this bug was not present was
18.0.x
Description
In Angular Material 18.1.x, when using a Material 3 theme, the
mat-divider
component uses theoutline
token instead of theoutline-variant
as specified by the Material 3 guidelines. This change caused sections in our application to appear more prominent than expected. Additionally, this creates inconsistency in places where we combine custom styles that set the color of outlines by using theoutline-variant
role from the theme, and also havemat-dividers
within.I understand that the change from #28995 is to achieve better color contrast. However, this deviates from the specification, which explains that dividers are decorative elements and have no minimum contrast requirements.
https://m3.material.io/components/divider/accessibility
https://m3.material.io/components/divider/specs#f7d1605e-1629-404c-86a5-0ef6848ce520
A potential workaround can be to use the
--mat-divider-color
property and set color to theoutline-variant
token, but it would be nice if there is no need for style changes.Reproduction
StackBlitz links:
Steps to reproduce:
outline
token.outline-variant
token.Expected Behavior
Divider uses the
outline-variant
color tokenActual Behavior
Divider uses the
outline
color tokenEnvironment
Angular CLI: 18.1.2
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: linux x64
Angular: 18.1.2
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, material-experimental
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1801.2
@angular-devkit/build-angular 18.1.2
@angular-devkit/core 18.1.2
@angular-devkit/schematics 18.1.2
@schematics/angular 18.1.2
rxjs 7.4.0
typescript 5.4.5
zone.js 0.14.6
The text was updated successfully, but these errors were encountered: