Skip to content

Commit

Permalink
Merge pull request #5 from Polymer/aria-labelledby
Browse files Browse the repository at this point in the history 
Aria labelledby
  • Loading branch information
@frankiefu
frankiefu committed May 16, 2016
2 parents 3a7a5bc + bf47ce6 commit 8501111
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 36 deletions.
68 changes: 40 additions & 28 deletions src/shop-checkout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,70 +142,77 @@ <h1>Checkout</h1>

<div class="subsection grid" visible$="[[_hasItems]]">
<section>
<h2>Account Information</h2>
<h2 id="accountInfoHeading">Account Information</h2>
<div class="row input-row">
<shop-input>
<input type="email" id="accountEmail" name="accountEmail"
placeholder="Email" autofocus required>
placeholder="Email" autofocus required
aria-labelledby="accountEmailLabel accountInfoHeading">
<shop-md-decorator error-message="Invalid Email" aria-hidden="true">
<label for="accountEmail">Email</label>
<label id="accountEmailLabel">Email</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
</div>
<div class="row input-row">
<shop-input>
<input type="tel" id="accountPhone" name="accountPhone" pattern="\d{10,}"
placeholder="Phone Number" required>
placeholder="Phone Number" required
aria-labelledby="accountPhoneLabel accountInfoHeading">
<shop-md-decorator error-message="Invalid Phone Number" aria-hidden="true">
<label for="accountPhone">Phone Number</label>
<label id="accountPhoneLabel">Phone Number</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
</div>
<h2>Shipping Address</h2>
<h2 id="shipAddressHeading">Shipping Address</h2>
<div class="row input-row">
<shop-input>
<input type="text" id="shipAddress" name="shipAddress" pattern=".{5,}"
placeholder="Address" required>
placeholder="Address" required
aria-labelledby="shipAddressLabel shipAddressHeading">
<shop-md-decorator error-message="Invalid Address" aria-hidden="true">
<label for="shipAddress">Address</label>
<label id="shipAddressLabel">Address</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
</div>
<div class="row input-row">
<shop-input>
<input type="text" id="shipCity" name="shipCity" pattern=".{2,}"
placeholder="City" required>
placeholder="City" required
aria-labelledby="shipCityLabel shipAddressHeading">
<shop-md-decorator error-message="Invalid City" aria-hidden="true">
<label for="shipCity">City</label>
<label id="shipCityLabel">City</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
</div>
<div class="row input-row">
<shop-input>
<input type="text" id="shipState" name="shipState" pattern=".{2,}"
placeholder="State/Province" required>
placeholder="State/Province" required
aria-labelledby="shipStateLabel shipAddressHeading">
<shop-md-decorator error-message="Invalid State/Province" aria-hidden="true">
<label for="shipState">State/Province</label>
<label id="shipStateLabel">State/Province</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
<shop-input>
<input type="text" id="shipZip" name="shipZip" pattern=".{4,}"
placeholder="Zip/Postal Code" required>
placeholder="Zip/Postal Code" required
aria-labelledby="shipZipLabel shipAddressHeading">
<shop-md-decorator error-message="Invalid Zip/Postal Code" aria-hidden="true">
<label for="shipZip">Zip/Postal Code</label>
<label id="shipZipLabel">Zip/Postal Code</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
</div>
<div class="column">
<label for="shipCountry" class="shop-select-label">Country</label>
<label id="shipCountryLabel" class="shop-select-label">Country</label>
<shop-select>
<select id="shipCountry" name="shipCountry" required>
<select id="shipCountry" name="shipCountry" required
aria-labelledby="shipCountryLabel shipAddressHeading">
<option value="US" selected>United States</option>
<option value="CA">Canada</option>
</select>
Expand All @@ -214,7 +221,7 @@ <h2>Shipping Address</h2>
</shop-md-decorator>
</shop-select>
</div>
<h2>Billing Address</h2>
<h2 id="billAddressHeading">Billing Address</h2>
<div class="billing-address-picker">
<shop-switch>
<input type="checkbox" id="setBilling" name="setBilling"
Expand All @@ -227,10 +234,11 @@ <h2>Billing Address</h2>
<div class="row input-row">
<shop-input>
<input type="text" id="billAddress" name="billAddress" pattern=".{5,}"
placeholder="Billing Address" required$="[[hasBillingAddress]]"
autocomplete="billing street-address">
placeholder="Address" required$="[[hasBillingAddress]]"
autocomplete="billing street-address"
aria-labelledby="billAddressLabel billAddressHeading">
<shop-md-decorator error-message="Invalid Address" aria-hidden="true">
<label for="billAddress">Billing Address</label>
<label id="billAddressLabel">Address</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
Expand All @@ -239,9 +247,10 @@ <h2>Billing Address</h2>
<shop-input>
<input type="text" id="billCity" name="billCity" pattern=".{2,}"
placeholder="City" required$="[[hasBillingAddress]]"
autocomplete="billing address-level2">
autocomplete="billing address-level2"
aria-labelledby="billCityLabel billAddressHeading">
<shop-md-decorator error-message="Invalid City" aria-hidden="true">
<label for="billCity">City</label>
<label id="billCityLabel">City</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
Expand All @@ -250,27 +259,30 @@ <h2>Billing Address</h2>
<shop-input>
<input type="text" id="billState" name="billState" pattern=".{2,}"
placeholder="State/Province" required$="[[hasBillingAddress]]"
autocomplete="billing address-level1">
autocomplete="billing address-level1"
aria-labelledby="billStateLabel billAddressHeading">
<shop-md-decorator error-message="Invalid State/Province" aria-hidden="true">
<label for="billState">State/Province</label>
<label id="billStateLabel">State/Province</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
<shop-input>
<input type="text" id="billZip" name="billZip" pattern=".{4,}"
placeholder="Zip/Postal Code" required$="[[hasBillingAddress]]"
autocomplete="billing postal-code">
autocomplete="billing postal-code"
aria-labelledby="billZipLabel billAddressHeading">
<shop-md-decorator error-message="Invalid Zip/Postal Code" aria-hidden="true">
<label for="billZip">Zip/Postal Code</label>
<label id="billZipLabel">Zip/Postal Code</label>
<shop-underline></shop-underline>
</shop-md-decorator>
</shop-input>
</div>
<div class="column">
<label for="billCountry" class="shop-select-label">Country</label>
<label id="billCountryLabel" class="shop-select-label">Country</label>
<shop-select>
<select id="billCountry" name="billCountry" required$="[[hasBillingAddress]]"
autocomplete="billing country">
autocomplete="billing country"
aria-labelledby="billCountryLabel billAddressHeading">
<option value="US" selected>United States</option>
<option value="CA">Canada</option>
</select>
Expand Down
2 changes: 1 addition & 1 deletion src/shop-tab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
@apply(--shop-tab-overlay);
}

:host(.shop-slide-overlay-static-above) #overlay {
:host(.shop-tabs-overlay-static-above) #overlay {
display: block;
}
</style>
Expand Down
8 changes: 4 additions & 4 deletions src/shop-slide-overlay.html → src/shop-tabs-overlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

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

<dom-module id="shop-slide-overlay">
<dom-module id="shop-tabs-overlay">
<template strip-whitespace>
<style>
:host {
Expand All @@ -28,7 +28,7 @@
</template>
<script>
Polymer({
is: 'shop-slide-overlay',
is: 'shop-tabs-overlay',

properties: {
/**
Expand All @@ -52,7 +52,7 @@
_targetChanged: function(newTarget, oldTarget) {
if (!this._transitionsInFlight.length) {
if (this._lastTarget) {
this._lastTarget.classList.remove('shop-slide-overlay-static-above');
this._lastTarget.classList.remove('shop-tabs-overlay-static-above');
}
this.style.display = 'block';
this._move(oldTarget, newTarget);
Expand All @@ -77,7 +77,7 @@
this._lastTarget = this.target;
} else {
if (this._lastTarget) {
this._lastTarget.classList.add('shop-slide-overlay-static-above');
this._lastTarget.classList.add('shop-tabs-overlay-static-above');
}
this.style.display = 'none';
}
Expand Down
6 changes: 3 additions & 3 deletions src/shop-tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-selector/iron-selectable.html">
<link rel="import" href="shop-slide-overlay.html">
<link rel="import" href="shop-tabs-overlay.html">

<dom-module id="shop-tabs">
<template strip-whitespace>
Expand All @@ -25,12 +25,12 @@
position: relative;
}

shop-slide-overlay {
shop-tabs-overlay {
@apply(--shop-tab-overlay);
}
</style>
<div id="container">
<shop-slide-overlay id="overlay"></shop-slide-overlay>
<shop-tabs-overlay id="overlay"></shop-tabs-overlay>
<content></content>
</div>
</template>
Expand Down

0 comments on commit 8501111

Please sign in to comment.