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 moves the high-contrast styles to their own file that's referenced from buttons and icon-buttons (but not FABs).
angular · Jun 21, 2021 · 66b17b7 · 66b17b7
1 parent 4caf039
commit 66b17b7
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 24 deletions.
diff --git a/src/material-experimental/mdc-button/BUILD.bazel b/src/material-experimental/mdc-button/BUILD.bazel
@@ -20,6 +20,7 @@ ng_module(
         ],
     ),
     assets = [
+        ":button_high_contrast_scss",
         ":button_scss",
         ":fab_scss",
         ":icon-button_scss",
@@ -54,12 +55,18 @@ sass_binary(
     ],
     deps = [
         ":button_base_scss_lib",
-        "//src/cdk/a11y:a11y_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 
+sass_binary(
+    name = "button_high_contrast_scss",
+    src = "button-high-contrast.scss",
+    include_paths = ["external/npm/node_modules"],
+    deps = ["//src/cdk/a11y:a11y_scss_lib"],
+)
+
 sass_binary(
     name = "fab_scss",
     src = "fab.scss",

diff --git a/src/material-experimental/mdc-button/button-high-contrast.scss b/src/material-experimental/mdc-button/button-high-contrast.scss
@@ -0,0 +1,19 @@
+@use '../../cdk/a11y';
+
+// Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs
+// don't need a special look in high-contrast mode, because those already have an outline.
+.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 {
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+  }
+}
+
+@include a11y.high-contrast(active, off) {
+  .mat-mdc-button-base:focus {
+    outline: solid 3px;
+  }
+}
diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss
@@ -1,7 +1,6 @@
 @use '@material/button/button' as mdc-button;
 @use '@material/button/variables' as mdc-button-variables;
 @use '../mdc-helpers/mdc-helpers';
-@use '../../cdk/a11y';
 @use 'button-base';
 
 
@@ -40,24 +39,6 @@
   }
 }
 
-// Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs
-// don't need a special look in high-contrast mode, because those already have an outline.
-.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 {
-  @include a11y.high-contrast(active, off) {
-    outline: solid 1px;
-  }
-}
-
-@include a11y.high-contrast(active, off) {
-  .mat-mdc-button-base:focus {
-    outline: solid 3px;
-  }
-}
-
 // Since the stroked button has has an actual border that reduces the available space for
 // child elements such as the ripple container or focus overlay, an inherited border radius
 // for the absolute-positioned child elements does not work properly. This is because the

diff --git a/src/material-experimental/mdc-button/button.ts b/src/material-experimental/mdc-button/button.ts
@@ -42,7 +42,7 @@ import {
     button[mat-stroked-button]
   `,
   templateUrl: 'button.html',
-  styleUrls: ['button.css'],
+  styleUrls: ['button.css', 'button-high-contrast.css'],
   inputs: MAT_BUTTON_INPUTS,
   host: MAT_BUTTON_HOST,
   exportAs: 'matButton',
@@ -73,7 +73,7 @@ export class MatButton extends MatButtonBase {
   host: MAT_ANCHOR_HOST,
   inputs: MAT_ANCHOR_INPUTS,
   templateUrl: 'button.html',
-  styleUrls: ['button.css'],
+  styleUrls: ['button.css', 'button-high-contrast.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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);
 

diff --git a/src/material-experimental/mdc-button/icon-button.ts b/src/material-experimental/mdc-button/icon-button.ts
@@ -35,7 +35,7 @@ import {
 @Component({
   selector: `button[mat-icon-button]`,
   templateUrl: 'button.html',
-  styleUrls: ['icon-button.css'],
+  styleUrls: ['icon-button.css', 'button-high-contrast.css'],
   inputs: MAT_BUTTON_INPUTS,
   host: MAT_BUTTON_HOST,
   exportAs: 'matButton',
@@ -61,7 +61,7 @@ export class MatIconButton extends MatButtonBase {
 @Component({
   selector: `a[mat-icon-button]`,
   templateUrl: 'button.html',
-  styleUrls: ['icon-button.css'],
+  styleUrls: ['icon-button.css', 'button-high-contrast.css'],
   inputs: MAT_ANCHOR_INPUTS,
   host: MAT_ANCHOR_HOST,
   exportAs: 'matButton, matAnchor',