Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(430)

Side by Side Diff: chrome/browser/resources/chromeos/login/oobe_buttons.html

Issue 2718133004: ChromeOS OOBE: More accessibility fixes. (Closed)
Patch Set: Update after review Created 3 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. 1 <!-- Copyright 2016 The Chromium Authors. All rights reserved.
2 Use of this source code is governed by a BSD-style license that can be 2 Use of this source code is governed by a BSD-style license that can be
3 found in the LICENSE file. --> 3 found in the LICENSE file. -->
4 4
5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm l"> 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm l">
6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-i conset-svg.html"> 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-i conset-svg.html">
7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html"> 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html">
8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.htm l"> 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.htm l">
9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> 9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html ">
10 10
(...skipping 19 matching lines...) Expand all
30 Note, that content must have separate DOM node (i.e. a separate div). 30 Note, that content must have separate DOM node (i.e. a separate div).
31 31
32 Example: 32 Example:
33 <oobe-icon-button inverse> 33 <oobe-icon-button inverse>
34 <div i18n-content="oobeOKButtonText"></div> 34 <div i18n-content="oobeOKButtonText"></div>
35 </oobe-icon-button> 35 </oobe-icon-button>
36 36
37 Attributes: 37 Attributes:
38 'disabled' - button is disabled when the attribute is set. 38 'disabled' - button is disabled when the attribute is set.
39 'inverse' - makes text white and background blue 39 'inverse' - makes text white and background blue
40 'aria-label' - accessibility label. 40 'label-for-aria' - accessibility label.
41 --> 41 -->
42 <dom-module id="oobe-text-button"> 42 <dom-module id="oobe-text-button">
43 <link rel="stylesheet" href="oobe_text_button.css"> 43 <link rel="stylesheet" href="oobe_text_button.css">
44 <template> 44 <template>
45 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]" 45 <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]"
46 inverse$="[[inverse]]" aria-label$="[[ariaLabel]]"> 46 inverse$="[[inverse]]" aria-label$="[[labelForAria]]">
47 <div id="container" 47 <div id="container"
48 class="flex layout horizontal center center-justified self-stretch"> 48 class="flex layout horizontal center center-justified self-stretch">
49 <content></content> 49 <content></content>
50 </div> 50 </div>
51 </paper-button> 51 </paper-button>
52 </template> 52 </template>
53 </dom-module> 53 </dom-module>
54 54
55 <!-- 55 <!--
56 Material design square "<- Back" and "Next ->" buttons. 56 Material design square "<- Back" and "Next ->" buttons.
57 Text is blue, background is white. 57 Text is blue, background is white.
58 58
59 Example: 59 Example:
60 <oobe-back-button on-tap="handleOnTap_"> 60 <oobe-back-button on-tap="handleOnTap_">
61 </oobe-back-button> 61 </oobe-back-button>
62 62
63 Attributes: 63 Attributes:
64 'disabled' - button is disabled when the attribute is set. 64 'disabled' - button is disabled when the attribute is set.
65 'aria-label' - accessibility label. 65 'label-for-aria' - accessibility label.
66 --> 66 -->
67 <dom-module id="oobe-back-button"> 67 <dom-module id="oobe-back-button">
68 <link rel="stylesheet" href="oobe_nav_button.css"> 68 <link rel="stylesheet" href="oobe_nav_button.css">
69 <template> 69 <template>
70 <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]" 70 <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
71 aria-label$="[[ariaLabel]]"> 71 aria-label$="[[labelForAria]]">
72 <div class="flex horizontal layout start center"> 72 <div class="flex horizontal layout start center">
73 <iron-icon icon="oobe-buttons:arrow-back"></iron-icon> 73 <iron-icon icon="oobe-buttons:arrow-back"></iron-icon>
74 <div id="text" i18n-content="back"></div> 74 <div id="text" i18n-content="back"></div>
75 </div> 75 </div>
76 </paper-button> 76 </paper-button>
77 </template> 77 </template>
78 </dom-module> 78 </dom-module>
79 79
80 <dom-module id="oobe-next-button"> 80 <dom-module id="oobe-next-button">
81 <link rel="stylesheet" href="oobe_nav_button.css"> 81 <link rel="stylesheet" href="oobe_nav_button.css">
(...skipping 10 matching lines...) Expand all
92 <!-- 92 <!--
93 Material design button that shows an icon and displays text. 93 Material design button that shows an icon and displays text.
94 94
95 Example: 95 Example:
96 <oobe-welcome-secondary-button icon="close"> 96 <oobe-welcome-secondary-button icon="close">
97 <div i18n-content="oobeCloseButtonText"></div> 97 <div i18n-content="oobeCloseButtonText"></div>
98 </oobe-welcome-secondary-button> 98 </oobe-welcome-secondary-button>
99 99
100 Attributes: 100 Attributes:
101 'icon' - a name of icon from material design set to show on button. 101 'icon' - a name of icon from material design set to show on button.
102 'aria-label' - accessibility label. 102 'label-for-aria' - accessibility label.
103 --> 103 -->
104 <dom-module id="oobe-welcome-secondary-button"> 104 <dom-module id="oobe-welcome-secondary-button">
105 <link rel="stylesheet" href="oobe_welcome_secondary_button.css"> 105 <link rel="stylesheet" href="oobe_welcome_secondary_button.css">
106 <template> 106 <template>
107 <paper-button id="button" aria-label$="[[ariaLabel]]"> 107 <paper-button id="button" aria-label$="[[labelForAria]]">
108 <div id="container" class="flex layout vertical center self-stretch"> 108 <div id="container" class="flex layout vertical center self-stretch">
109 <div id="subcontainer" 109 <div id="subcontainer"
110 class="flex layout horizontal center self-stretch"> 110 class="flex layout horizontal center self-stretch">
111 <iron-icon icon="[[icon]]" class="oobe-icon"></iron-icon> 111 <iron-icon icon="[[icon]]" class="oobe-icon"></iron-icon>
112 <content></content> 112 <content></content>
113 </div> 113 </div>
114 </div> 114 </div>
115 </paper-button> 115 </paper-button>
116 </template> 116 </template>
117 </dom-module> 117 </dom-module>
OLDNEW
« no previous file with comments | « chrome/browser/resources/chromeos/login/oobe_a11y_option.js ('k') | chrome/browser/resources/chromeos/login/oobe_buttons.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698