Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 3a291ac

Browse files
SplaktarSplaktar
committed
fix(theming, toolbar, subheader, input): align color palettes and contrasts with AA standards
- 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.
1 parent d716fde commit 3a291ac

File tree

15 files changed

+94
-69
lines changed

15 files changed

+94
-69
lines changed

‎docs/app/js/app.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
5151
'800': '#014AB6',
5252
'900': '#013583',
5353
'contrastDefaultColor': 'light',
54-
'contrastDarkColors': '50 100 200 A100',
55-
'contrastStrongLightColors': '300 400 A200 A400'
54+
'contrastDarkColors': '50 100 200 300 400 A100 A200',
55+
'contrastStrongLightColors': '500 600 700 800 900 A400 A700'
5656
}));
5757
$mdThemingProvider.definePalette('docs-red', $mdThemingProvider.extendPalette('red', {
5858
'A100': '#DE3641'
@@ -76,8 +76,10 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
7676
.defaultIconSet('img/icons/sets/core-icons.svg', 24);
7777

7878
$mdThemingProvider.theme('default')
79-
.primaryPalette('docs-blue')
80-
.accentPalette('docs-red');
79+
.primaryPalette('docs-blue')
80+
.accentPalette('docs-red', {
81+
'default': 'A700'
82+
});
8183

8284
$mdThemingProvider.enableBrowserColor();
8385

‎src/components/button/demoBasicUsage/index.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<md-content>
33

44
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
5-
<md-button>{{title1}}</md-button>
5+
<md-button>Button</md-button>
66
<md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
77
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
8-
<md-button class="md-warn">{{title4}}</md-button>
8+
<md-button class="md-warn">Warn</md-button>
99
<div class="label">Flat</div>
1010
</section>
1111
<md-divider></md-divider>
@@ -14,7 +14,7 @@
1414
<md-button class="md-raised">Button</md-button>
1515
<md-button class="md-raised md-primary">Primary</md-button>
1616
<md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
17-
<md-button class="md-raised md-warn">Warn</md-button>
17+
<md-button class="md-raised md-accent">Accent</md-button>
1818
<div class="label">Raised</div>
1919
</section>
2020
<md-divider></md-divider>
@@ -58,10 +58,10 @@
5858
<md-divider></md-divider>
5959

6060
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
61-
<md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
62-
<md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
63-
<md-button class="md-accent">Accent</md-button>
64-
<md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
61+
<md-button class="md-primary md-hue-2">Primary Hue 2</md-button>
62+
<md-button class="md-warn md-raised md-hue-1">Warn Hue 1</md-button>
63+
<md-button class="md-accent md-raised md-hue-2">Accent Hue 2</md-button>
64+
<md-button class="md-accent md-hue-3">Accent Hue 3</md-button>
6565
<div class="label">Themed</div>
6666
</section>
6767
<md-divider></md-divider>

‎src/components/button/demoBasicUsage/script.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
angular.module('buttonsDemoBasic', ['ngMaterial'])
22
.controller('AppCtrl', function($scope) {
3-
$scope.title1 = 'Button';
4-
$scope.title4 = 'Warn';
53
$scope.isDisabled = true;
64
$scope.googleUrl = 'http://google.com';
75
});

‎src/components/button/demoBasicUsage/style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ section .md-button {
1313
bottom: 5px;
1414
left: 7px;
1515
font-size: 14px;
16-
opacity: 0.54;
16+
color: rgba(0, 0, 0, 0.54);
1717
}

‎src/components/card/demoCardActionButtons/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
<md-card>
9191
<md-card-header>
9292
<md-card-avatar>
93-
<img src="img/logo.svg"/>
93+
<img src="img/logo.svg" alt="Washed Out"/>
9494
</md-card-avatar>
9595
<md-card-header-text>
9696
<span class="md-title">AngularJS</span>

‎src/components/card/demoInCardActions/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<md-card>
3131
<md-card-header>
3232
<md-card-avatar>
33-
<img class="md-user-avatar" src="img/100-2.jpeg"/>
33+
<img class="md-user-avatar" src="img/100-2.jpeg" alt="Washed Out"/>
3434
</md-card-avatar>
3535
<md-card-header-text>
3636
<span class="md-title">User</span>

‎src/components/colors/colors.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Use a RegExp to check if the `md-colors="<expression>"` is static string
66
* or one that should be observed and dynamically interpolated.
77
*/
8-
var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?('|")[a-zA-Z0-9-.]*('|"))+\s*}$/;
8+
var STATIC_COLOR_EXPRESSION = /^{((\s|,)*?["'a-zA-Z-]+?\s*?:\s*?(['"])[a-zA-Z0-9-.]*(['"]))+\s*}$/;
99
var colorPalettes = null;
1010

1111
/**

‎src/components/colors/demoBasicUsage/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div layout="column" ng-cloak class="md-padding">
22
<p style="margin-bottom: 10px;">
3-
Custom component implementations using Material elements often want to easily apply theme colors
3+
Custom component implementations using Material elements often want to apply theme colors
44
to their custom components. Consider the custom <code>&lt;user-card&gt;</code> component below
55
where the <code>md-colors</code> attribute is used to color the background and text colors
66
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
1818
<p class="footnote">
1919
Note: The <code>md-colors</code> directive allows pre-defined theme colors to be applied
2020
as CSS style properties. <code>md-colors</code> uses the palettes defined in the
21-
<a class="md-accent" href="https://material.io/archive/guidelines/style/color.html#color-color-palette">
21+
<a href="https://material.io/archive/guidelines/style/color.html#color-color-palette">
2222
Material Design Colors</a> and the themes defined using <code>$mdThemingProvider</code>.
2323
This directive is an extension of the <code>$mdTheming</code> features.
2424
</p>

‎src/components/colors/demoThemePicker/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div layout="column" ng-cloak ng-controller="ThemeDemoCtrl" class="md-padding">
22
<p>
3-
Select two of the <a class="md-accent" href="{{mdURL}}">Material Palettes</a>
3+
Select two of the <a href="{{mdURL}}">Material Palettes</a>
44
below:
55
</p>
66
<!-- Theme Options -->
77
<div layout="row" layout-wrap layout-align="center center">
88
<md-button ng-repeat="color in colors" flex-gt-md="15" flex="30"
9-
md-colors="{background: '{{color}}'}" md-colors-watch="false"
9+
md-colors="{background: '{{color}}-400'}" md-colors-watch="false"
1010
ng-disabled="primary === color && !isPrimary" ng-click="selectTheme(color)">
1111
{{color}}
1212
</md-button>

‎src/components/input/input-theme.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
md-input-container.md-THEME_NAME-theme {
22
.md-input {
3-
@include input-placeholder-color('\'{{background-default-contrast-hint}}\'');
3+
@include input-placeholder-color('\'{{background-default-contrast-secondary}}\'');
44
color: '{{background-default-contrast}}';
55
border-color: '{{background-default-contrast-divider}}';
66
}
@@ -11,7 +11,7 @@ md-input-container.md-THEME_NAME-theme {
1111

1212
label,
1313
.md-placeholder {
14-
color: '{{background-default-contrast-hint}}';
14+
color: '{{background-default-contrast-secondary}}';
1515
}
1616

1717
label.md-required:after {

‎src/components/subheader/subheader-theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.md-subheader.md-THEME_NAME-theme {
2-
color: '{{ foreground-2-0.23 }}';
2+
color: '{{ foreground-2-0.54 }}';
33
background-color: '{{background-default}}';
44

55
&.md-primary {

‎src/components/toolbar/demoInputsInToolbar/index.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
</span>
1010
<md-input-container md-no-float>
1111
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
12-
<input placeholder="primary" />
12+
<input placeholder="primary" aria-label="primary" />
1313
</md-input-container>
1414
<md-input-container class="md-accent" md-no-float>
1515
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
16-
<input placeholder="accent" />
16+
<input placeholder="accent" aria-label="accent" />
1717
</md-input-container>
1818
<md-input-container class="md-warn" md-no-float>
1919
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
20-
<input placeholder="warn" />
20+
<input placeholder="warn" aria-label="warn" />
2121
</md-input-container>
2222
</header>
2323
</md-toolbar>
@@ -31,15 +31,15 @@
3131
</span>
3232
<md-input-container md-no-float>
3333
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
34-
<input placeholder="primary" />
34+
<input placeholder="primary" aria-label="primary" />
3535
</md-input-container>
3636
<md-input-container class="md-accent" md-no-float>
3737
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
38-
<input placeholder="accent" />
38+
<input placeholder="accent" aria-label="accent" />
3939
</md-input-container>
4040
<md-input-container class="md-warn" md-no-float>
4141
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
42-
<input placeholder="warn" />
42+
<input placeholder="warn" aria-label="warn" />
4343
</md-input-container>
4444
</header>
4545
</md-toolbar>
@@ -53,27 +53,27 @@
5353
</span>
5454
<md-input-container md-no-float>
5555
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
56-
<input placeholder="primary" />
56+
<input placeholder="primary" aria-label="primary" />
5757
</md-input-container>
5858
<md-input-container class="md-accent" md-no-float>
5959
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
60-
<input placeholder="accent" />
60+
<input placeholder="accent" aria-label="accent" />
6161
</md-input-container>
6262
<md-input-container class="md-warn" md-no-float>
6363
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
64-
<input placeholder="warn" />
64+
<input placeholder="warn" aria-label="warn" />
6565
</md-input-container>
6666
</header>
6767
</md-toolbar>
6868
<md-content class="md-margin">
6969
<md-input-container md-no-float>
70-
<input placeholder="primary no float" />
70+
<input placeholder="primary no float" aria-label="primary no float" />
7171
</md-input-container>
7272
<md-input-container>
73-
<input placeholder="primary" />
73+
<input placeholder="primary" aria-label="primary" />
7474
</md-input-container>
7575
<md-input-container class="md-accent">
76-
<input placeholder="accent" />
76+
<input placeholder="accent" aria-label="accent" />
7777
</md-input-container>
7878
</md-content>
7979
</div>

‎src/components/toolbar/toolbar-theme.scss

+5
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,11 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
107107
background-color: '{{warn-color}}';
108108
color: '{{warn-contrast}}';
109109

110+
md-icon {
111+
color: '{{accent-contrast}}';
112+
fill: '{{accent-contrast}}';
113+
}
114+
110115
md-input-container[md-no-float] {
111116
.md-input {
112117
@include input-placeholder-color('\'{{warn-default-contrast-hint}}\'');

‎src/core/core.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function rAFDecorator($delegate) {
5959
* our callback will only be fired once per frame, with the last resize
6060
* event that happened before that frame.
6161
*
62-
* @param {function} callback function to debounce
62+
* @param {function} cb function to debounce
6363
*/
6464
$delegate.throttle = function(cb) {
6565
var queuedArgs, alreadyQueued, queueCb, context;

0 commit comments

Comments
 (0)