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

Splaktar · Splaktar · commit fe69363e9788 · 2020-07-01T01:44:25.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.
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 {`