Skip to content

Commit 8501111

Browse files
frankiefufrankiefu
committed
Merge pull request #5 from Polymer/aria-labelledby
Aria labelledby
2 parents 3a7a5bc + bf47ce6 commit 8501111

File tree

4 files changed

+48
-36
lines changed

4 files changed

+48
-36
lines changed

‎src/shop-checkout.html‎

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -142,70 +142,77 @@ <h1>Checkout</h1>
142142

143143
<div class="subsection grid" visible$="[[_hasItems]]">
144144
<section>
145-
<h2>Account Information</h2>
145+
<h2 id="accountInfoHeading">Account Information</h2>
146146
<div class="row input-row">
147147
<shop-input>
148148
<input type="email" id="accountEmail" name="accountEmail"
149-
placeholder="Email" autofocus required>
149+
placeholder="Email" autofocus required
150+
aria-labelledby="accountEmailLabel accountInfoHeading">
150151
<shop-md-decorator error-message="Invalid Email" aria-hidden="true">
151-
<label for="accountEmail">Email</label>
152+
<label id="accountEmailLabel">Email</label>
152153
<shop-underline></shop-underline>
153154
</shop-md-decorator>
154155
</shop-input>
155156
</div>
156157
<div class="row input-row">
157158
<shop-input>
158159
<input type="tel" id="accountPhone" name="accountPhone" pattern="\d{10,}"
159-
placeholder="Phone Number" required>
160+
placeholder="Phone Number" required
161+
aria-labelledby="accountPhoneLabel accountInfoHeading">
160162
<shop-md-decorator error-message="Invalid Phone Number" aria-hidden="true">
161-
<label for="accountPhone">Phone Number</label>
163+
<label id="accountPhoneLabel">Phone Number</label>
162164
<shop-underline></shop-underline>
163165
</shop-md-decorator>
164166
</shop-input>
165167
</div>
166-
<h2>Shipping Address</h2>
168+
<h2 id="shipAddressHeading">Shipping Address</h2>
167169
<div class="row input-row">
168170
<shop-input>
169171
<input type="text" id="shipAddress" name="shipAddress" pattern=".{5,}"
170-
placeholder="Address" required>
172+
placeholder="Address" required
173+
aria-labelledby="shipAddressLabel shipAddressHeading">
171174
<shop-md-decorator error-message="Invalid Address" aria-hidden="true">
172-
<label for="shipAddress">Address</label>
175+
<label id="shipAddressLabel">Address</label>
173176
<shop-underline></shop-underline>
174177
</shop-md-decorator>
175178
</shop-input>
176179
</div>
177180
<div class="row input-row">
178181
<shop-input>
179182
<input type="text" id="shipCity" name="shipCity" pattern=".{2,}"
180-
placeholder="City" required>
183+
placeholder="City" required
184+
aria-labelledby="shipCityLabel shipAddressHeading">
181185
<shop-md-decorator error-message="Invalid City" aria-hidden="true">
182-
<label for="shipCity">City</label>
186+
<label id="shipCityLabel">City</label>
183187
<shop-underline></shop-underline>
184188
</shop-md-decorator>
185189
</shop-input>
186190
</div>
187191
<div class="row input-row">
188192
<shop-input>
189193
<input type="text" id="shipState" name="shipState" pattern=".{2,}"
190-
placeholder="State/Province" required>
194+
placeholder="State/Province" required
195+
aria-labelledby="shipStateLabel shipAddressHeading">
191196
<shop-md-decorator error-message="Invalid State/Province" aria-hidden="true">
192-
<label for="shipState">State/Province</label>
197+
<label id="shipStateLabel">State/Province</label>
193198
<shop-underline></shop-underline>
194199
</shop-md-decorator>
195200
</shop-input>
196201
<shop-input>
197202
<input type="text" id="shipZip" name="shipZip" pattern=".{4,}"
198-
placeholder="Zip/Postal Code" required>
203+
placeholder="Zip/Postal Code" required
204+
aria-labelledby="shipZipLabel shipAddressHeading">
199205
<shop-md-decorator error-message="Invalid Zip/Postal Code" aria-hidden="true">
200-
<label for="shipZip">Zip/Postal Code</label>
206+
<label id="shipZipLabel">Zip/Postal Code</label>
201207
<shop-underline></shop-underline>
202208
</shop-md-decorator>
203209
</shop-input>
204210
</div>
205211
<div class="column">
206-
<label for="shipCountry" class="shop-select-label">Country</label>
212+
<label id="shipCountryLabel" class="shop-select-label">Country</label>
207213
<shop-select>
208-
<select id="shipCountry" name="shipCountry" required>
214+
<select id="shipCountry" name="shipCountry" required
215+
aria-labelledby="shipCountryLabel shipAddressHeading">
209216
<option value="US" selected>United States</option>
210217
<option value="CA">Canada</option>
211218
</select>
@@ -214,7 +221,7 @@ <h2>Shipping Address</h2>
214221
</shop-md-decorator>
215222
</shop-select>
216223
</div>
217-
<h2>Billing Address</h2>
224+
<h2 id="billAddressHeading">Billing Address</h2>
218225
<div class="billing-address-picker">
219226
<shop-switch>
220227
<input type="checkbox" id="setBilling" name="setBilling"
@@ -227,10 +234,11 @@ <h2>Billing Address</h2>
227234
<div class="row input-row">
228235
<shop-input>
229236
<input type="text" id="billAddress" name="billAddress" pattern=".{5,}"
230-
placeholder="Billing Address" required$="[[hasBillingAddress]]"
231-
autocomplete="billing street-address">
237+
placeholder="Address" required$="[[hasBillingAddress]]"
238+
autocomplete="billing street-address"
239+
aria-labelledby="billAddressLabel billAddressHeading">
232240
<shop-md-decorator error-message="Invalid Address" aria-hidden="true">
233-
<label for="billAddress">Billing Address</label>
241+
<label id="billAddressLabel">Address</label>
234242
<shop-underline></shop-underline>
235243
</shop-md-decorator>
236244
</shop-input>
@@ -239,9 +247,10 @@ <h2>Billing Address</h2>
239247
<shop-input>
240248
<input type="text" id="billCity" name="billCity" pattern=".{2,}"
241249
placeholder="City" required$="[[hasBillingAddress]]"
242-
autocomplete="billing address-level2">
250+
autocomplete="billing address-level2"
251+
aria-labelledby="billCityLabel billAddressHeading">
243252
<shop-md-decorator error-message="Invalid City" aria-hidden="true">
244-
<label for="billCity">City</label>
253+
<label id="billCityLabel">City</label>
245254
<shop-underline></shop-underline>
246255
</shop-md-decorator>
247256
</shop-input>
@@ -250,27 +259,30 @@ <h2>Billing Address</h2>
250259
<shop-input>
251260
<input type="text" id="billState" name="billState" pattern=".{2,}"
252261
placeholder="State/Province" required$="[[hasBillingAddress]]"
253-
autocomplete="billing address-level1">
262+
autocomplete="billing address-level1"
263+
aria-labelledby="billStateLabel billAddressHeading">
254264
<shop-md-decorator error-message="Invalid State/Province" aria-hidden="true">
255-
<label for="billState">State/Province</label>
265+
<label id="billStateLabel">State/Province</label>
256266
<shop-underline></shop-underline>
257267
</shop-md-decorator>
258268
</shop-input>
259269
<shop-input>
260270
<input type="text" id="billZip" name="billZip" pattern=".{4,}"
261271
placeholder="Zip/Postal Code" required$="[[hasBillingAddress]]"
262-
autocomplete="billing postal-code">
272+
autocomplete="billing postal-code"
273+
aria-labelledby="billZipLabel billAddressHeading">
263274
<shop-md-decorator error-message="Invalid Zip/Postal Code" aria-hidden="true">
264-
<label for="billZip">Zip/Postal Code</label>
275+
<label id="billZipLabel">Zip/Postal Code</label>
265276
<shop-underline></shop-underline>
266277
</shop-md-decorator>
267278
</shop-input>
268279
</div>
269280
<div class="column">
270-
<label for="billCountry" class="shop-select-label">Country</label>
281+
<label id="billCountryLabel" class="shop-select-label">Country</label>
271282
<shop-select>
272283
<select id="billCountry" name="billCountry" required$="[[hasBillingAddress]]"
273-
autocomplete="billing country">
284+
autocomplete="billing country"
285+
aria-labelledby="billCountryLabel billAddressHeading">
274286
<option value="US" selected>United States</option>
275287
<option value="CA">Canada</option>
276288
</select>

‎src/shop-tab.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
@apply(--shop-tab-overlay);
3636
}
3737

38-
:host(.shop-slide-overlay-static-above) #overlay {
38+
:host(.shop-tabs-overlay-static-above) #overlay {
3939
display: block;
4040
}
4141
</style>

src/shop-slide-overlay.html renamed to src/shop-tabs-overlay.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<link rel="import" href="../bower_components/polymer/polymer.html">
1212

13-
<dom-module id="shop-slide-overlay">
13+
<dom-module id="shop-tabs-overlay">
1414
<template strip-whitespace>
1515
<style>
1616
:host {
@@ -28,7 +28,7 @@
2828
</template>
2929
<script>
3030
Polymer({
31-
is: 'shop-slide-overlay',
31+
is: 'shop-tabs-overlay',
3232

3333
properties: {
3434
/**
@@ -52,7 +52,7 @@
5252
_targetChanged: function(newTarget, oldTarget) {
5353
if (!this._transitionsInFlight.length) {
5454
if (this._lastTarget) {
55-
this._lastTarget.classList.remove('shop-slide-overlay-static-above');
55+
this._lastTarget.classList.remove('shop-tabs-overlay-static-above');
5656
}
5757
this.style.display = 'block';
5858
this._move(oldTarget, newTarget);
@@ -77,7 +77,7 @@
7777
this._lastTarget = this.target;
7878
} else {
7979
if (this._lastTarget) {
80-
this._lastTarget.classList.add('shop-slide-overlay-static-above');
80+
this._lastTarget.classList.add('shop-tabs-overlay-static-above');
8181
}
8282
this.style.display = 'none';
8383
}

‎src/shop-tabs.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="import" href="../bower_components/polymer/polymer.html">
1212
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
1313
<link rel="import" href="../bower_components/iron-selector/iron-selectable.html">
14-
<link rel="import" href="shop-slide-overlay.html">
14+
<link rel="import" href="shop-tabs-overlay.html">
1515

1616
<dom-module id="shop-tabs">
1717
<template strip-whitespace>
@@ -25,12 +25,12 @@
2525
position: relative;
2626
}
2727

28-
shop-slide-overlay {
28+
shop-tabs-overlay {
2929
@apply(--shop-tab-overlay);
3030
}
3131
</style>
3232
<div id="container">
33-
<shop-slide-overlay id="overlay"></shop-slide-overlay>
33+
<shop-tabs-overlay id="overlay"></shop-tabs-overlay>
3434
<content></content>
3535
</div>
3636
</template>

0 commit comments

Comments
 (0)