From a45a9ef26daaec1d3eb27e90a1613dc656949530 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 17 Feb 2025 13:27:54 +0100 Subject: [PATCH] fix(material/paginator): disabled buttons not visible in high contrast mode #29379 changed the selector for disabled buttons from `[disabled]` to `[aria-disabled]`, however it didn't apply the same change to the high contrast styles which led to them being invisible in dark mode. I've also improved the experience by styling the buttons as disabled in high contrast mode. Fixes #30504. --- src/material/paginator/paginator.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss index 39d8d9a801e6..ab3e9e9b06ec 100644 --- a/src/material/paginator/paginator.scss +++ b/src/material/paginator/paginator.scss @@ -131,17 +131,17 @@ $button-icon-size: 28px; @include cdk.high-contrast { // The disabled button icon has to be set explicitly since the selector is too specific. - .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon, + .mat-mdc-icon-button[aria-disabled] .mat-mdc-paginator-icon, .mat-mdc-paginator-icon { fill: currentColor; - - // On Chromium browsers the `currentColor` blends in with the - // background for SVGs so we have to fall back to `CanvasText`. - fill: CanvasText; } .mat-mdc-paginator-range-actions .mat-mdc-icon-button { outline: solid 1px; + + &[aria-disabled] { + color: GrayText; + } } }