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 · Jun 16, 2021 · a06de2c · a06de2c
1 parent 9428939
commit a06de2c
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
@@ -45,8 +45,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
@@ -1,6 +1,7 @@
 @use '@material/icon-button' as mdc-icon-button;
 @use '../mdc-helpers/mdc-helpers';
 @use 'button-base';
+@use '../../cdk/a11y';
 
 @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
@@ -26,4 +27,8 @@
       opacity: 1;
     }
   }
+
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+  }
 }