fix(theming, toolbar, subheader, input): align color palettes and contrasts with AA standards

Splaktar · Splaktar · commit 3a291ac6f6ae · 2020-07-02T01:32:49.000-04:00
- properly theme `md-icon`s in toolbars with `md-warn` - all colors and their contrasts meet 4.5 contrast ratio requirements - except a few edge cases which have comments to explain them - add `aria-labels` to demoInputsInToolbar - increase opacity of subheader text to meet AA contrast ratio requirements - increase opacity of input placeholders and labels to meet AA contrast ratio requirements - minor regexp adjustments for `md-colors` - fix colors/demoThemePicker and colors/demoBasicUsage to pass Lighthouse a11y audit - update button/demoBasicUsage to pass Lighthouse a11y audit - add missing alt tag in demoInCardActions and demoCardActionButtons - adjust docs app theme to define valid contrast colors for `docs-blue` - fix inaccurate JSDoc Fixes #8992. Fixes #10164. Closes #8993. BREAKING CHANGE: The contrast colors (the text or icon color, for example on a raised button) of many of our default palettes have been updated to meet the [AA level of the contrast guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum) for web accessibility. If you are using our default palettes directly, the accessibility of your application should be improved. However, we recommend that you evaluate this after updating to `1.2.0`. There may be edge cases in your app or custom styles that need to be updated to meet accessibility guidelines. If you find significant accessibility issues after updating, please report them to us. In `1.2.x`, we have a lot more control over our component theming in regards to hues and opacities. If your app is using a custom palette, whether based on a copy of default palette or not, we encourage you to evaluate that your contrast configuration meets the WebAIM guidelines. Please review our guide on [Defining Custom Palettes](https://material.angularjs.org/latest/Theming/03_configuring_a_theme#defining-custom-palettes) for details.
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
@@ -51,8 +51,8 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
     '800': '#014AB6',
     '900': '#013583',
     'contrastDefaultColor': 'light',
-    'contrastDarkColors': '50 100 200 A100',
-    'contrastStrongLightColors': '300 400 A200 A400'
+    'contrastDarkColors': '50 100 200 300 400 A100 A200',
+    'contrastStrongLightColors': '500 600 700 800 900 A400 A700'
   }));
   $mdThemingProvider.definePalette('docs-red', $mdThemingProvider.extendPalette('red', {
     'A100': '#DE3641'
@@ -76,8 +76,10 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
     .defaultIconSet('img/icons/sets/core-icons.svg', 24);
 
   $mdThemingProvider.theme('default')
-      .primaryPalette('docs-blue')
-      .accentPalette('docs-red');
+    .primaryPalette('docs-blue')
+    .accentPalette('docs-red', {
+      'default': 'A700'
+    });
 
   $mdThemingProvider.enableBrowserColor();
 
diff --git a/src/components/button/demoBasicUsage/index.html b/src/components/button/demoBasicUsage/index.html
@@ -2,10 +2,10 @@
   <md-content>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
-      <md-button>{{title1}}</md-button>
+      <md-button>Button</md-button>
       <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
       <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
-      <md-button class="md-warn">{{title4}}</md-button>
+      <md-button class="md-warn">Warn</md-button>
       <div class="label">Flat</div>
     </section>
     <md-divider></md-divider>
@@ -14,7 +14,7 @@
       <md-button class="md-raised">Button</md-button>
       <md-button class="md-raised md-primary">Primary</md-button>
       <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
-      <md-button class="md-raised md-warn">Warn</md-button>
+      <md-button class="md-raised md-accent">Accent</md-button>
       <div class="label">Raised</div>
     </section>
     <md-divider></md-divider>
@@ -58,10 +58,10 @@
     <md-divider></md-divider>
 
     <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
-      <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
-      <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
-      <md-button class="md-accent">Accent</md-button>
-      <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
+      <md-button class="md-primary md-hue-2">Primary Hue 2</md-button>
+      <md-button class="md-warn md-raised md-hue-1">Warn Hue 1</md-button>
+      <md-button class="md-accent md-raised md-hue-2">Accent Hue 2</md-button>
+      <md-button class="md-accent md-hue-3">Accent Hue 3</md-button>
       <div class="label">Themed</div>
     </section>
     <md-divider></md-divider>
diff --git a/src/components/button/demoBasicUsage/script.js b/src/components/button/demoBasicUsage/script.js
@@ -1,7 +1,5 @@
 angular.module('buttonsDemoBasic', ['ngMaterial'])
 .controller('AppCtrl', function($scope) {
-  $scope.title1 = 'Button';
-  $scope.title4 = 'Warn';
   $scope.isDisabled = true;
   $scope.googleUrl = 'http://google.com';
 });
diff --git a/src/components/button/demoBasicUsage/style.css b/src/components/button/demoBasicUsage/style.css
@@ -13,5 +13,5 @@ section .md-button {
   bottom: 5px;
   left: 7px;
   font-size: 14px;
-  opacity: 0.54;
+  color: rgba(0, 0, 0, 0.54);
 }
diff --git a/src/components/card/demoCardActionButtons/index.html b/src/components/card/demoCardActionButtons/index.html
@@ -90,7 +90,7 @@
       <md-card>
         <md-card-header>
           <md-card-avatar>
-            <img src="img/logo.svg"/>
+            <img src="img/logo.svg" alt="Washed Out"/>
           </md-card-avatar>
           <md-card-header-text>
             <span class="md-title">AngularJS</span>
diff --git a/src/components/card/demoInCardActions/index.html b/src/components/card/demoInCardActions/index.html
@@ -30,7 +30,7 @@
       <md-card>
         <md-card-header>
           <md-card-avatar>
-            <img class="md-user-avatar" src="img/100-2.jpeg"/>
+            <img class="md-user-avatar" src="img/100-2.jpeg" alt="Washed Out"/>
           </md-card-avatar>
           <md-card-header-text>
             <span class="md-title">User</span>
diff --git a/src/components/colors/colors.js b/src/components/colors/colors.js
@@ -5,7 +5,7 @@
    *  Use a RegExp to check if the `md-colors="<expression>"` is static string
    *  or one that should be observed and dynamically interpolated.
    */
-  var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?('|")[a-zA-Z0-9-.]*('|"))+\s*}$/;
+  var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?(['"])[a-zA-Z0-9-.]*(['"]))+\s*}$/;
   var colorPalettes = null;
 
   /**
diff --git a/src/components/colors/demoBasicUsage/index.html b/src/components/colors/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
 <div layout="column" ng-cloak class="md-padding">
   <p style="margin-bottom: 10px;">
-    Custom component implementations using Material elements often want to easily apply theme colors
+    Custom component implementations using Material elements often want to apply theme colors
     to their custom components. Consider the custom <code>&lt;user-card&gt;</code> component below
     where the <code>md-colors</code> attribute is used to color the background and text colors
     using either the current or specified theme palette colors.
@@ -18,7 +18,7 @@ <h4 class="card-title"> <code>&lt;user-card&gt;</code> coloring using the 'fores
   <p class="footnote">
     Note: The <code>md-colors</code> directive allows pre-defined theme colors to be applied
     as CSS style properties. <code>md-colors</code> uses the palettes defined in the
-    <a class="md-accent" href="https://material.io/archive/guidelines/style/color.html#color-color-palette">
+    <a href="https://material.io/archive/guidelines/style/color.html#color-color-palette">
       Material Design Colors</a> and the themes defined using <code>$mdThemingProvider</code>.
     This directive is an extension of the <code>$mdTheming</code> features.
   </p>
diff --git a/src/components/colors/demoThemePicker/index.html b/src/components/colors/demoThemePicker/index.html
@@ -1,12 +1,12 @@
 <div layout="column" ng-cloak ng-controller="ThemeDemoCtrl" class="md-padding">
   <p>
-    Select two of the <a class="md-accent" href="{{mdURL}}">Material Palettes</a>
+    Select two of the <a href="{{mdURL}}">Material Palettes</a>
     below:
   </p>
   <!-- Theme Options -->
   <div layout="row" layout-wrap layout-align="center center">
     <md-button ng-repeat="color in colors" flex-gt-md="15" flex="30"
-               md-colors="{background: '{{color}}'}" md-colors-watch="false"
+               md-colors="{background: '{{color}}-400'}" md-colors-watch="false"
                ng-disabled="primary === color && !isPrimary" ng-click="selectTheme(color)">
       {{color}}
     </md-button>
diff --git a/src/components/input/input-theme.scss b/src/components/input/input-theme.scss
@@ -1,6 +1,6 @@
 md-input-container.md-THEME_NAME-theme {
   .md-input {
-    @include input-placeholder-color('\'{{background-default-contrast-hint}}\'');
+    @include input-placeholder-color('\'{{background-default-contrast-secondary}}\'');
     color: '{{background-default-contrast}}';
     border-color: '{{background-default-contrast-divider}}';
   }
@@ -11,7 +11,7 @@ md-input-container.md-THEME_NAME-theme {
 
   label,
   .md-placeholder {
-    color: '{{background-default-contrast-hint}}';
+    color: '{{background-default-contrast-secondary}}';
   }
 
   label.md-required:after {
diff --git a/src/components/subheader/subheader-theme.scss b/src/components/subheader/subheader-theme.scss
@@ -1,5 +1,5 @@
 .md-subheader.md-THEME_NAME-theme {
-  color: '{{ foreground-2-0.23 }}';
+  color: '{{ foreground-2-0.54 }}';
   background-color: '{{background-default}}';
 
   &.md-primary {
diff --git a/src/components/toolbar/demoInputsInToolbar/index.html b/src/components/toolbar/demoInputsInToolbar/index.html
@@ -9,15 +9,15 @@
       </span>
       <md-input-container md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="primary" />
+        <input placeholder="primary" aria-label="primary" />
       </md-input-container>
       <md-input-container class="md-accent" md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="accent" />
+        <input placeholder="accent" aria-label="accent" />
       </md-input-container>
       <md-input-container class="md-warn" md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="warn" />
+        <input placeholder="warn" aria-label="warn" />
       </md-input-container>
     </header>
   </md-toolbar>
@@ -31,15 +31,15 @@
       </span>
       <md-input-container md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="primary" />
+        <input placeholder="primary" aria-label="primary" />
       </md-input-container>
       <md-input-container class="md-accent" md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="accent" />
+        <input placeholder="accent" aria-label="accent" />
       </md-input-container>
       <md-input-container class="md-warn" md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="warn" />
+        <input placeholder="warn" aria-label="warn" />
       </md-input-container>
     </header>
   </md-toolbar>
@@ -53,27 +53,27 @@
       </span>
       <md-input-container md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="primary" />
+        <input placeholder="primary" aria-label="primary" />
       </md-input-container>
       <md-input-container class="md-accent" md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="accent" />
+        <input placeholder="accent" aria-label="accent" />
       </md-input-container>
       <md-input-container class="md-warn" md-no-float>
         <md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
-        <input placeholder="warn" />
+        <input placeholder="warn" aria-label="warn" />
       </md-input-container>
     </header>
   </md-toolbar>
   <md-content class="md-margin">
     <md-input-container md-no-float>
-      <input placeholder="primary no float" />
+      <input placeholder="primary no float" aria-label="primary no float" />
     </md-input-container>
     <md-input-container>
-      <input placeholder="primary" />
+      <input placeholder="primary" aria-label="primary" />
     </md-input-container>
     <md-input-container class="md-accent">
-      <input placeholder="accent" />
+      <input placeholder="accent" aria-label="accent" />
     </md-input-container>
   </md-content>
 </div>
diff --git a/src/components/toolbar/toolbar-theme.scss b/src/components/toolbar/toolbar-theme.scss
@@ -107,6 +107,11 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
     background-color: '{{warn-color}}';
     color: '{{warn-contrast}}';
 
+    md-icon {
+      color: '{{accent-contrast}}';
+      fill: '{{accent-contrast}}';
+    }
+
     md-input-container[md-no-float] {
       .md-input {
         @include input-placeholder-color('\'{{warn-default-contrast-hint}}\'');
diff --git a/src/core/core.js b/src/core/core.js
@@ -59,7 +59,7 @@ function rAFDecorator($delegate) {
    * our callback will only be fired once per frame, with the last resize
    * event that happened before that frame.
    *
-   * @param {function} callback function to debounce
+   * @param {function} cb function to debounce
    */
   $delegate.throttle = function(cb) {
     var queuedArgs, alreadyQueued, queueCb, context;
diff --git a/src/core/services/theming/theme.palette.js b/src/core/services/theming/theme.palette.js

Original file line number	Diff line number	Diff line change
`@@ -13,5 +13,5 @@ section .md-button {`
`13`	`13`	`bottom: 5px;`
`14`	`14`	`left: 7px;`
`15`	`15`	`font-size: 14px;`
`16`		`- opacity: 0.54;`
	`16`	`+ color: rgba(0, 0, 0, 0.54);`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`md-input-container.md-THEME_NAME-theme {`
`2`	`2`	`.md-input {`
`3`		`- @include input-placeholder-color('\'{{background-default-contrast-hint}}\'');`
	`3`	`+ @include input-placeholder-color('\'{{background-default-contrast-secondary}}\'');`
`4`	`4`	`color: '{{background-default-contrast}}';`
`5`	`5`	`border-color: '{{background-default-contrast-divider}}';`
`6`	`6`	`}`
`@@ -11,7 +11,7 @@ md-input-container.md-THEME_NAME-theme {`
`11`	`11`
`12`	`12`	`label,`
`13`	`13`	`.md-placeholder {`
`14`		`- color: '{{background-default-contrast-hint}}';`
	`14`	`+ color: '{{background-default-contrast-secondary}}';`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`label.md-required:after {`