fix(material-experimental/mdc-button): high contrast outline for soli…

…tary icon-buttons The high-contrast style for all buttons was previously defined in `button.scss`, but icon-buttons load `icon-button.scss`. This means that the high contrast style for icon buttons was only loaded when another type of button was on the page. This change moved the icon-button high-contrast style to `icon-button.scss`.
angular · Jul 2, 2021 · 7bac83a · 7bac83a
1 parent b682f84
commit 7bac83a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
@@ -47,8 +47,7 @@
 .mat-mdc-button:not(.mdc-button--outlined),
 .mat-mdc-unelevated-button:not(.mdc-button--outlined),
 .mat-mdc-raised-button:not(.mdc-button--outlined),
-.mat-mdc-outlined-button:not(.mdc-button--outlined),
-.mat-mdc-icon-button {
+.mat-mdc-outlined-button:not(.mdc-button--outlined) {
   @include a11y.high-contrast(active, off) {
     outline: solid 1px;
   }

diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material-experimental/mdc-button/icon-button.scss
@@ -2,6 +2,7 @@
 @use '../../material/core/style/private';
 @use '../mdc-helpers/mdc-helpers';
 @use 'button-base';
+@use '../../cdk/a11y';
 
 @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
@@ -28,4 +29,8 @@
       opacity: 1;
     }
   }
+
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+  }
 }