diff options
| -rwxr-xr-x | StoneIsland/www/css/account.css | 60 | ||||
| -rwxr-xr-x | StoneIsland/www/css/blogs.css | 11 | ||||
| -rwxr-xr-x | StoneIsland/www/css/cart.css | 24 | ||||
| -rwxr-xr-x | StoneIsland/www/css/index.css | 12 | ||||
| -rwxr-xr-x | StoneIsland/www/css/nav.css | 44 | ||||
| -rwxr-xr-x | StoneIsland/www/css/products.css | 21 | ||||
| -rwxr-xr-x | StoneIsland/www/index.html | 275 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/cart/CartSummary.js | 3 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/etc/accessibility.js | 9 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/products/CollectionView.js | 2 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/products/Selector.js | 2 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/view/Serializable.js | 7 |
12 files changed, 276 insertions, 194 deletions
diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css index 32c7df79..c8c03aec 100755 --- a/StoneIsland/www/css/account.css +++ b/StoneIsland/www/css/account.css @@ -67,7 +67,7 @@ content:''; width:calc(100% + 100px); height:1px; - background:#bbb; + background:#666; position:absolute; bottom:0; left:-50px; @@ -128,6 +128,17 @@ font-weight: bold; } +label { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 16px; + color: #000; + letter-spacing:1px; + text-transform:uppercase; + height: 48px; +} input[type=text], input[type=password], input[type=number], input[type=date], input[type=email] { font-family:pfd, sans-serif; font-size:14px; @@ -135,13 +146,13 @@ input[type=text], input[type=password], input[type=number], input[type=date], in color:#000; letter-spacing:1px; text-transform:uppercase; - height:35px; + height: 48px; text-align:center; margin: 0px auto; display:block; - margin-top:4px; + margin-top: 0px; width: calc(100vw - 10px); - border:1px solid #a9a9a9; + border:1px solid #696969; padding: 0; border-radius: 0; } @@ -164,12 +175,12 @@ input[type=text], input[type=password], input[type=number], input[type=email] { border:none; box-sizing: border-box; float: left; - border: 1px solid #a9a9a9; + border: 1px solid #696969; width: 50%; } .half-input > input:first-child { - border-right: 1px solid #a9a9a9; + border-right: 1px solid #696969; } #signup .toggle-container, #profile .toggle-container { @@ -351,7 +362,7 @@ input.switch:checked + label:after { } .checkbox-container { - font-size:11px; + font-size:14px; width:calc(100vw - 10px); display:table; box-sizing:border-box; @@ -463,13 +474,13 @@ input.switch:checked + label:after { color: #000; letter-spacing: 1px; text-transform: uppercase; - height: 35px; + height: 48px; text-align: center; margin: 0px auto; display: block; margin-top: 4px; width: calc(100vw - 10px); - border: 1px solid #a9a9a9; + border: 1px solid #696969; } .date-wrapper span { display: block; @@ -480,7 +491,7 @@ input.switch:checked + label:after { margin-top: 0px; float: left; box-sizing: border-box; - border: 1px solid #a9a9a9; + border: 1px solid #696969; border-left: 0px; } @@ -491,18 +502,17 @@ input.switch:checked + label:after { .select-wrapper [type=date] { opacity: 0; width: 100%; - height: 35px; - line-height: 35px; + height: 48px; + line-height: 48px; position: absolute; top: -5px; left: -1px; - width: 1px; height: 1px; } .select-wrapper select { opacity: 0; width: 100%; - height: 35px; - line-height: 35px; + height: 48px; + line-height: 48px; position: absolute; top: 0; left: 0; box-sizing: border-box; @@ -512,8 +522,8 @@ input.switch:checked + label:after { } .select-wrapper span { position: relative; - top: 8px; - color: #888; + top: 15px; + color: #666; } .select-wrapper.picked span { color: #000; @@ -521,33 +531,25 @@ input.switch:checked + label:after { .country-wrapper-static { text-align: center; - color: #a9a9a9; + color: #696969; border: 1px solid; padding-top: 9px; font-size: 14px; - height: 35px; + height: 48px; box-sizing: border-box; } -.container-row input:first-child { -margin-top:10px -} - .container-row .half-input input { margin-top:0px } -#login .container-row input:first-child { -margin-bottom:9px!important -} - .newuser { display:inline-block; - padding:14px; + padding:18px; text-decoration:underline } .forgotpassword { - padding:14px; + padding:18px; text-decoration:underline }
\ No newline at end of file diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css index bf5ab68f..241cbecb 100755 --- a/StoneIsland/www/css/blogs.css +++ b/StoneIsland/www/css/blogs.css @@ -6,11 +6,18 @@ margin: 15px 0 0; text-align: center; text-transform:uppercase; + display:flex; + flex-direction: row; + justify-content: center; + align-items: center; } #story .links li { - padding: 10px; + display: flex; + justify-content: center; + align-items: center; + height: 48px; + padding: 0 15px; list-style-type: none; - display: inline-block; } #story .links li:before { content: ' | ', diff --git a/StoneIsland/www/css/cart.css b/StoneIsland/www/css/cart.css index 7619a82b..8c31cf74 100755 --- a/StoneIsland/www/css/cart.css +++ b/StoneIsland/www/css/cart.css @@ -6,20 +6,24 @@ #cart .steps { width: 100%; - border-bottom: 1px solid #bbb; + border-bottom: 1px solid #666; font-size: 0; + display: flex; + flex-direction: row; } #cart .steps span { - display: inline-block; + display: flex; font-size: 13px; text-align: center; - padding: 11px 0 10px; - color: #bbb; + color: #666; width: 33%; position:relative; + height: 48px; + justify-content: center; + align-items: center; } .summary_step, .shipping_step { - border-right: 1px solid #bbb + border-right: 1px solid #666; } #cart.summary .summary_step, @@ -155,7 +159,7 @@ padding-left:5px; display:block; width:20px; height:20px; -border:1px solid #d2d2d2; +border:1px solid #b2b2b2; float:right; margin-bottom:10px; position:relative; @@ -165,7 +169,7 @@ position:relative; content:''; width:1px; height:22px; -background:#bbb; +background:#333; position:absolute; top:50%; left:50%; @@ -178,7 +182,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%) content:''; width:1px; height:22px; - background:#bbb; + background:#333; position:absolute; top:50%; left:50%; @@ -241,7 +245,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%) width:calc(100vw - 30px); margin:0 auto; display:table; - color:#bbb; + color:#666; font-size:11px; } @@ -274,7 +278,7 @@ transform:rotate(45deg) translateX(-50%) translateY(-50%) #orders .order_section { padding-bottom: 16px; - border-bottom: 1px solid #bbb; + border-bottom: 1px solid #666; } diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css index 4d8e5514..9e665a4d 100755 --- a/StoneIsland/www/css/index.css +++ b/StoneIsland/www/css/index.css @@ -60,3 +60,15 @@ body { color: red !important; border-color: red !important; } +.error_hilite ~ span.err { + display: flex; +} +span.err { + display: none; + text-align: center; + justify-content: center; + align-items: center; + font-size: 14px; + height: 48px; + color: red !important; +} diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css index 885ee500..9a4f63d8 100755 --- a/StoneIsland/www/css/nav.css +++ b/StoneIsland/www/css/nav.css @@ -79,7 +79,7 @@ display: block; font-size: 14px; letter-spacing:1.25px; - color: #bbb; + color: #666; padding: 4px 0 12px 20px } @@ -94,7 +94,7 @@ float: left; width: 61px; border-left: 1px solid #ddd; - color: #bbb; + color: #666; font-size: 18px; padding: 5px 0; text-align: center; @@ -137,10 +137,13 @@ padding-bottom:0px; } #intro div { position: absolute; - top: 50%; left: 50%; + top: 50%; + left: 50%; width: 200px; - padding: 50px; - text-align: center; + height: 100px; + display: flex; + justify-content: center; + align-items: center; font-size: 17px; } #intro #compass { @@ -219,30 +222,30 @@ padding-bottom:0px; } #header .cart_rapper { - display: inline-block; + display: flex; + justify-content: center; + align-items: flex-end; position: relative; float: right; - width: 48px; height: 48px; + width: 44px; height: 48px; } #header .cart { position: relative; - float: right; width: 18px; - top: 5px; + margin-bottom: 10px; height: 18px; - margin-right: 0px; background: #fff; background-image:url(../img/cart-box.png); background-size:100%; background-repeat:no-repeat; } -.cart .cart_count { +#header .cart .cart_count { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); - color: #bbb; + color: #666; font-size:12.35px; } @@ -273,12 +276,16 @@ padding-bottom:0px; } #footer div { width: 50%; + height: 48px; text-align: center; - padding: 12px 0; color: #000; float: left; font-size:14px; font-weight:bold; + padding: 0; + display: flex; + justify-content: center; + align-items: center; } #footer .ok { color: #000; @@ -287,7 +294,7 @@ padding-bottom:0px; width: 100%; } #footer .ok.disabled { - color: #bbb; + color: #666; } @@ -400,7 +407,7 @@ padding-bottom:0px; #selector:not(.selector-outer-wrap) .options div { background: white; text-align: center; - padding: 7px 12px; + padding: 12px 12px; box-sizing:border-box; font-size: 14px; border-left:1px solid black; @@ -481,9 +488,12 @@ padding-bottom:0px; h1 { text-align: center; margin: 0; - padding: 16px 10px 12px 10px; + display: flex; + justify-content: center; + align-items: center; border-bottom: 1px solid #000; - font-size: 14px; + height: 48px; + font-size: 16px; color: #000; letter-spacing: 1px; font-weight: bold; diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css index 1a7d5ba2..002c086b 100755 --- a/StoneIsland/www/css/products.css +++ b/StoneIsland/www/css/products.css @@ -143,7 +143,11 @@ .product .share { float:right; - padding: 12px 12px; + padding: 0 12px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; border:1px solid black; } @@ -152,13 +156,20 @@ font-size:14px; } -.product span { +.product .size-color { + display: flex; + flex-direction: row; +} +.product .size-color span { position:relative; box-sizing:border-box; - display: inline-block; - padding: 12px; + padding: 0 12px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; } -.product span.size { +.product .size-color span.size { border-right: 1px solid #444; } diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index 9ea46a85..bad250d3 100755 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -28,95 +28,95 @@ <link rel="stylesheet" type="text/css" href="css/blogs.css"> <title>Stone Island</title> </head> -<body class="loading"> +<body class="loading" role="application"> <div id="nav"> <div id="nav-container"> <div id="nav-row"> <!-- flex --> - <span class="menu"> - <div class="logo"></div> - <div class="main_menu"> - <span class="store">STORE</span> - <span class="hub">HUB</span> - <span class="story">STORY</span> - <span class="archive">ARCHIVE</span> + <span role="menu" class="menu"> + <div class="logo" aria-label="Stone Island"></div> + <div role="menu" aria-label="Main Menu" class="main_menu"> + <span role="link" class="store">STORE</span> + <span role="link" class="hub">HUB</span> + <span role="link" class="story">STORY</span> + <span role="link" class="archive">ARCHIVE</span> </div> - <div class="account_menu"> - <span class="account_back menu-emphasis">< MY ACCOUNT</span> - <span class="profile">MY PROFILE</span> - <span class="payment">MY CARD</span> - <span class="shipping">ADDRESS BOOK</span> - <span class="orders">MY ORDERS</span> - <span class="return_link">RETURNS</span> - <span class="settings">NOTIFICATIONS</span> + <div role="menu" aria-label="Account Menu" class="account_menu"> + <span role="link" class="account_back menu-emphasis">< MY ACCOUNT</span> + <span role="link" class="profile">MY PROFILE</span> + <span role="link" class="payment">MY CARD</span> + <span role="link" class="shipping">ADDRESS BOOK</span> + <span role="link" class="orders">MY ORDERS</span> + <span role="link" class="return_link">RETURNS</span> + <span role="link" class="settings">NOTIFICATIONS</span> </div> - <div class="faq_menu"> - <span class="faq_back menu-emphasis">< FAQ</span> - <span class="privacy">PRIVACY POLICY</span> - <span class="account_terms">MY ACCOUNT TERMS AND CONDITIONS OF USE</span> - <span class="terms">TERMS AND CONDITIONS</span> - <span class="returns">RETURN POLICY</span> - <span class="care">CUSTOMER CARE</span> + <div role="menu" aria-label="FAQ Menu" class="faq_menu"> + <span role="link" class="faq_back menu-emphasis">< FAQ</span> + <span role="link" class="privacy">PRIVACY POLICY</span> + <span role="link" class="account_terms">MY ACCOUNT TERMS AND CONDITIONS OF USE</span> + <span role="link" class="terms">TERMS AND CONDITIONS</span> + <span role="link" class="returns">RETURN POLICY</span> + <span role="link" class="care">CUSTOMER CARE</span> </div> </span> </div> <div id="nav-fill"> <!-- flex fill --> - <span class="submenu"> + <span role="menu" class="submenu"> <div class="main_menu"> - <span class="account">MY ACCOUNT</span> - <span class="login">LOGIN</span> - <span class="faq">FAQ</span> + <span role="link" class="account">MY ACCOUNT</span> + <span role="link" class="login">LOGIN</span> + <span role="link" class="faq">FAQ</span> </div> <div class="account_menu"> - <span class="logout">LOGOUT</span> - <span class="faq">FAQ</span> - <span class="main">MAIN MENU</span> + <span role="link" class="logout">LOGOUT</span> + <span role="link" class="faq">FAQ</span> + <span role="link" class="main">MAIN MENU</span> </div> <div class="faq_menu"> - <span class="account">MY ACCOUNT</span> - <span class="login">LOGIN</span> - <span class="logout">LOGOUT</span> - <span class="main">MAIN MENU</span> + <span role="link" class="account">MY ACCOUNT</span> + <span role="link" class="login">LOGIN</span> + <span role="link" class="logout">LOGOUT</span> + <span role="link" class="main">MAIN MENU</span> </div> </span> </div> <!-- end flex --> </div> - <span class="social"> - <span class="fb ion-social-facebook"></span> - <span class="insta ion-social-instagram-outline"></span> - <span class="tw ion-social-twitter"></span> - <span class="yt ion-social-youtube"></span> + <span class="social" role="list" aria-label="Social Links"> + <span role="link" class="fb ion-social-facebook"></span> + <span role="link" class="insta ion-social-instagram-outline"></span> + <span role="link" class="tw ion-social-twitter"></span> + <span role="link" class="yt ion-social-youtube"></span> </span> </div> <div id="content"> - <div id="intro"> + <div id="intro" role="menu" aria-label="Stone Island Home Screen"> <div id="compass"></div> - <div class="store">STORE</div> - <div class="hub">HUB</div> - <div class="story">STORY</div> - <div class="archive">ARCHIVE</div> + <div role="link" class="store">STORE</div> + <div role="link" class="hub">HUB</div> + <div role="link" class="story">STORY</div> + <div role="link" class="archive">ARCHIVE</div> <div class="alert"></div> - <span class="latlng">+40° 58' 90.9" N 74° 04' 46.3" W</span> + <span class="latlng" role="note" aria-label="Your Latitude and Longitude">+40° 58' 90.9" N 74° 04' 46.3" W</span> </div> <div id="header"> - <span class="burger ion-android-menu"></span> - <span class="logo"></span> - <span class="cart_rapper"><span class="cart"><span class="cart_count">0</span></span></span> + <span role="menu" aria-label="Show main menu" class="burger ion-android-menu"></span> + <span role="link" aria-label="Homepage. Stone Island logo" class="logo"></span> + <span role="link" aria-label="View cart" class="cart_rapper"><span class="cart"><span role="display" class="cart_count">0</span></span></span> </div> <div id="footer"> <!-- 'Cancel' i think needs to go BACK in the navigation.. rather than jumping to the home screen --> - <div class="cancel">CANCEL</div> - <div class="ok">OK</div> + <div role="button" class="cancel">CANCEL</div> + <div role="button" class="ok">OK</div> </div> @@ -124,7 +124,7 @@ <div id="story"> <div class="scroll"> - <h1>STORY</h1> + <h1 aria-label="Current section: Stone Island Story">STORY</h1> <img> <ul class="links"></ul> <div class="content"> @@ -139,19 +139,19 @@ <div id="hub"> <div class="scroll"> - <h1>HUB</h1> + <h1 aria-label="Current section: Stone Island Hub">HUB</h1> <div class="content"> <script type="text/html" class="template"> <div class="hub_item" data-id="{{id}}"> - <div class="gallery gallery-{{id}}"></div> - <div class="gallery-left"></div> - <div class="gallery-right"></div> - <div class="content-header"> - <div class="content-share"> - SHARE + + <div class="gallery gallery-{{id}}" role="carousel"></div> + <div role="button" class="gallery-left"></div> + <div role="button" class="gallery-right"></div> + <div role="heading" class="content-header"> + <div role="button" class="content-share"> + SHARE + </div> - <span class="title">{{title}}</span> - <span class="subtitle">{{subtitle}}</span> + <span role="heading" class="title">{{title}}</span> + <span role="heading" class="subtitle">{{subtitle}}</span> <span class="date"> {{date}} <span class="store"> @@ -195,20 +195,21 @@ </div> </div> <div class="heading"> - <h1>ARCHIVE</h1> - <div class="subtitle">'982'015</div> + <h1 role="heading" aria-label="Current section: Stone Island Archive">ARCHIVE</h1> + <div role="heading" class="subtitle" aria-label="1982 to 2015">'982'015</div> </div> </div> <div id="privacy" class="page"> <div class="scroll"> - <h1>PRIVACY POLICY</h1> + <h1 aria-label="Current section: Privacy Policy">PRIVACY POLICY</h1> <div class="content"></div> </div> </div> + <div id="account_terms" class="page"> <div class="scroll"> - <h1>MY ACCOUNT TERMS AND CONDITIONS OF USE</h1> + <h1 aria-label="Current section: My Account terms and conditions of use">MY ACCOUNT TERMS AND CONDITIONS OF USE</h1> <div class="content"> <h2>1. Services</h2> <p> @@ -261,21 +262,24 @@ </div> </div> </div> + <div id="terms" class="page"> <div class="scroll"> - <h1>TERMS AND CONDITIONS</h1> + <h1 aria-label="Current section: Terms and conditions">TERMS AND CONDITIONS</h1> <div class="content"></div> </div> </div> + <div id="returns" class="page"> <div class="scroll"> - <h1>RETURN POLICY</h1> + <h1 aria-label="Current section: Return policy">RETURN POLICY</h1> <div class="content"></div> </div> </div> + <div id="care" class="page"> <div class="scroll"> - <h1>CUSTOMER CARE</h1> + <h1 aria-label="Current section: Customer care">CUSTOMER CARE</h1> <div class="content"></div> </div> </div> @@ -285,12 +289,12 @@ <div id="collection"> <div class="scroll"> - <h1>LOADING...</h1> + <h1 aria-label="Current section: Store loading...">LOADING...</h1> <div class="loader"></div> <div class="content"> <script type="text/html" class="template"> - <div class="item" data-code="{{code8}}"> - <img src="{{image}}"> + <div role="link" class="item" data-code="{{code8}}"> + <img src="{{image}}" alt="{{title}}"> </div> </script> </div> @@ -299,7 +303,7 @@ <div id="search"> <div class="scroll"> - <h1>SEARCH</h1> + <h1 aria-label="Current section: Search">SEARCH</h1> <div class="form"> <input type="text" class="q" placeholder="ENTER YOUR SEARCH"> </div> @@ -309,16 +313,16 @@ <div id="product"> <div class="scroll"> <div class="loader"></div> - <div id="gallery" class="gallery"> + <div id="gallery" class="gallery" role="carousel"> <script type="text/html" class="template"> - <div class="item" aria-label="{{alt}}" style="background-image:url({{image}})"></div> + <div role="link" class="item" aria-label="{{alt}}" style="background-image:url({{image}})"></div> </script> </div> - <div class="gallery-left" aria-label="Scroll gallery left"></div> - <div class="gallery-right" aria-label="Scroll gallery right"></div> + <div role="button" class="gallery-left" aria-label="Scroll gallery left"></div> + <div role="button" class="gallery-right" aria-label="Scroll gallery right"></div> <div class="content"> <div class="product-header"> - <span class="title"></span> + <span role="heading" class="title"></span> </div> <div class="type-price"> <span class="type"></span> @@ -327,11 +331,11 @@ <div class="style-share"> <span class="style"> <div class="size-color"> - <span class="size"></span> - <span class="color"></span> + <span role="button" class="size" aria-label="Tap to select size. Current size"></span> + <span role="button" class="color" aria-label="Tap to select color. Current color"></span> </div> </span> - <span class="share">SHARE +</span> + <span role="button" class="share">SHARE +</span> </div> <div class="fit">Fits Large</div> <div class='fitHeader'></div> @@ -354,7 +358,7 @@ </h3> <h4> </h4> - <div class="website_link"> + <div role="link" class="website_link"> visit<br> <b>www.stoneisland.com</b> </div> @@ -366,31 +370,33 @@ <div id="login"> <div class="scroll"> - <h1>LOGIN</h1> + <h1 aria-label="Current section: Log In">LOGIN</h1> <div class="form"> <div class="container"> <div class="container-row"> - <input type="email" name="Email" placeholder="EMAIL ADDRESS" required tabindex="1"> - <form><input type="password" name="Password" placeholder="PASSWORD" required tabindex="2"></form> + <label for="login_email_address">Email Address</label> + <input type="email" id="login_email_address" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="1"> + <label for="login_password">Password</label> + <form><input type="password" id="login_password" name="Password" aria-placeholder="PASSWORD" required tabindex="2"></form> </div> <div class="container-fill"> <div class="container-message premessage"> - <div class="newuser">New User?</div> - <div class="forgotpassword">Forgot Password?</div> + <div rel="link" class="newuser">New User?</div> + <div rel="link" class="forgotpassword">Forgot Password?</div> </div> <div class="container-message submessage"> <span class="msg"></span> </div> </div> </div> - <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"> + <input type="submit" aria-label="Submit form" style="position: absolute; left: -9999px; width: 1px; height: 1px;"> </div> </div> </div> <div id="logout"> <div class="scroll"> - <h1>LOGOUT</h1> + <h1 aria-label="Current section: You are now Logged Out">LOGOUT</h1> <div class="container"> <div class="container-fill"> <span class="container-message msg"> @@ -403,50 +409,69 @@ <div id="signup"> <div class="scroll"> - <h1>NEW USER</h1> + <h1 aria-label="Current section: New User. Create an account">NEW USER</h1> <div class="form"> <div class="container"> <div class="container-row"> - <input type="text" name="Name" placeholder="FIRST NAME" required tabindex="1"> - <input type="text" name="Surname" placeholder="LAST NAME" required tabindex="2"> - <input type="email" name="Email" placeholder="EMAIL ADDRESS" required tabindex="3"> - <input type="email" name="ConfirmEmail" placeholder="CONFIRM EMAIL ADDRESS" required tabindex="4"> + <label for="signup_name">First Name</label> + <input type="text" id="signup_name" name="Name" aria-placeholder="FIRST NAME" required tabindex="1"> + <span class='err' id="signup_name_error"></span> + + <label for="signup_surname">Last Name</label> + <input type="text" id="signup_surname" name="Surname" aria-placeholder="LAST NAME" required tabindex="2"> + <span class='err' id="signup_surname_error"></span> + + <label for="signup_email">Email Address</label> + <input type="email" id="signup_email" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="3"> + <span class='err' id="signup_email_error"></span> + + <label for="signup_confirmemail">Confirm Email Address</label> + <input type="email" id="signup_confirmemail" name="ConfirmEmail" aria-placeholder="CONFIRM EMAIL ADDRESS" required tabindex="4"> + <span class='err' id="signup_confirmemail_error"></span> + + <label for="signup_birthday">Birthday (MM/DD/YYYY)</label> <div class="select-wrapper date-wrapper"> - <span>BIRTHDAY (MM/DD/YYYY)</span> - <input type="date" name="BirthDay" min="1900-01-01" placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="5"> + <span></span> + <input type="date" id="signup_birthday" name="BirthDay" aria-label="Birthday" min="1900-01-01" aria-placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="5"> </div> + <span class='err' id="signup_birthday_error"></span> <h2>PASSWORD</h2> - <input type="password" name="Password" placeholder="PASSWORD (7 CHARACTERS OR MORE)" required tabindex="6"> - <input type="password" name="Password2" placeholder="CONFIRM PASSWORD" required tabindex="7"> + <label for="signup_password">Password (7 Characters or more)</label> + <input type="password" id="signup_password" name="Password" aria-placeholder="PASSWORD (7 CHARACTERS OR MORE)" required tabindex="6"> + <span class='err' id="signup_password_error"></span> + + <label for="signup_confirm_password">Confirm Password</label> + <input type="password" id="signup_confirm_password" name="Password2" aria-placeholder="CONFIRM PASSWORD" required tabindex="7"> + <span class='err' id="signup_confirm_password_error"></span> </div> <div class="container-row"> - <div class="checkbox-container "> + <div class="checkbox-container"> <div class="checkbox-row"> <div class="checkbox-toggle"> - <input type="checkbox" id="checkbox-data-profiling" name="YooxLetter" value="true" required tabindex="8"> + <input type="checkbox" id="checkbox-data-profiling" aria-labelledby="checkbox-data-profiling-label" name="YooxLetter" value="true" required tabindex="8"> <label for="checkbox-data-profiling"></label> </div> - <label class="checkbox-caption" for="checkbox-data-profiling"> + <label class="checkbox-caption" for="checkbox-data-profiling" id="checkbox-data-profiling-label"> I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION FOR MARKETING PURPOSES. </label> </div> <div class="checkbox-row"> <div class="checkbox-toggle"> - <input type="checkbox" id="checkbox-shopping-data-profiling" name="DataProfiling" value="true" required tabindex="9"> + <input type="checkbox" id="checkbox-shopping-data-profiling" aria-labelledby="checkbox-shopping-data-profiling-label" name="DataProfiling" value="true" required tabindex="9"> <label for="checkbox-shopping-data-profiling"></label> </div> - <label class="checkbox-caption" for="checkbox-shopping-data-profiling"> + <label class="checkbox-caption" for="checkbox-shopping-data-profiling" id="checkbox-shopping-data-profiling-label"> I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION TO CUSTOMIZE MY SHOPPING EXPERIENCE BASED ON MY INTERESTS AND HABITS. </label> </div> <div class="checkbox-row"> <div class="checkbox-toggle"> - <input type="checkbox" id="checkbox-shopping-account-terms" name="GdprTerms" value="true" required tabindex="10"> + <input type="checkbox" id="checkbox-shopping-account-terms" aria-labelledby="checkbox-gdpr-terms-label" name="GdprTerms" value="true" required tabindex="10"> <label for="checkbox-shopping-data-profiling"></label> </div> - <label class="checkbox-caption" for="checkbox-shopping-account-terms"> + <label class="checkbox-caption" for="checkbox-shopping-account-terms" id="checkbox-gdpr-terms-label"> I ACCEPT MY ACCOUNT TERMS AND CONDITIONS OF USE * </label> </div> @@ -467,21 +492,21 @@ <div id="profile"> <div class="scroll"> - <h1>MY PROFILE</h1> + <h1 aria-label="Current section: My Profile">MY PROFILE</h1> <div class="form"> <div class="container"> <div class="container-row"> - <input type="text" name="Name" placeholder="FIRST NAME" required tabindex="1"> - <input type="text" name="Surname" placeholder="LAST NAME" required tabindex="2"> - <input type="email" name="Email" placeholder="EMAIL ADDRESS" required tabindex="3"> + <input type="text" name="Name" aria-label="First name" placeholder="FIRST NAME" required tabindex="1"> + <input type="text" name="Surname" aria-label="Last name" placeholder="LAST NAME" required tabindex="2"> + <input type="email" name="Email" aria-label="Email address" placeholder="EMAIL ADDRESS" required tabindex="3"> <div class="select-wrapper date-wrapper"> <span>BIRTHDAY (MM/DD/YYYY)</span> - <input type="date" name="BirthDay" min="1900-01-01" placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="4"> + <input type="date" name="BirthDay" aria-label="Birthday" min="1900-01-01" placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="4"> </div> <h2>CHANGE PASSWORD</h2> - <input type="password" name="CurrentPassword" placeholder="CURRENT PASSWORD" required> - <input type="password" name="NewPassword" placeholder="NEW PASSWORD (7 CHARACTERS OR MORE)" required tabindex="5"> + <input type="password" name="CurrentPassword" aria-label="Current password" placeholder="CURRENT PASSWORD" required> + <input type="password" name="NewPassword" aria-label="New password (seven characters or more)" placeholder="NEW PASSWORD (7 CHARACTERS OR MORE)" required tabindex="5"> <div class="container-fill container-fill-condensed"> <div class="container-message container-message-condensed"> <span class="msg msg-condensed"> @@ -492,19 +517,19 @@ <div class="checkbox-container"> <div class="checkbox-row"> <div class="checkbox-toggle"> - <input type="checkbox" id="checkbox-data-profiling-profile" name="YooxLetter" value="true" required tabindex="7"> + <input type="checkbox" id="checkbox-data-profiling-profile" aria-labelledby="yoox-letter-checkbox" name="YooxLetter" value="true" required tabindex="7"> <label for="checkbox-data-profiling-profile"></label> </div> - <label class="checkbox-caption" for="checkbox-data-profiling-profile"> + <label class="checkbox-caption" for="checkbox-data-profiling-profile" id="yoox-letter-checkbox"> I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION FOR MARKETING PURPOSES. </label> </div> <div class="checkbox-row"> <div class="checkbox-toggle"> - <input type="checkbox" id="checkbox-shopping-data-profiling-profile" name="DataProfiling" value="true" required tabindex="8"> + <input type="checkbox" id="checkbox-shopping-data-profiling-profile" aria-labelledby="yoox-data-profiling-checkbox" name="DataProfiling" value="true" required tabindex="8"> <label for="checkbox-shopping-data-profiling-profile"></label> </div> - <label class="checkbox-caption" for="checkbox-shopping-data-profiling-profile"> + <label class="checkbox-caption" for="checkbox-shopping-data-profiling-profile" id="yoox-data-profiling-checkbox"> I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION TO CUSTOMIZE MY SHOPPING EXPERIENCE BASED ON MY INTERESTS AND HABITS. </label> </div> @@ -524,7 +549,7 @@ <div id="shipping"> <div class="scroll"> - <h1>ADDRESS BOOK</h1> + <h1 aria-label="Current section: Your address book">ADDRESS BOOK</h1> <div class="form"> <div class="container"> <div class="container-row"> @@ -548,7 +573,7 @@ <div id="payment"> <div class="scroll"> - <h1>MY CARD</h1> + <h1 aria-label="Current section: My Card">MY CARD</h1> <div class="form"> <div class="container"> <div class="container-row"> @@ -573,7 +598,7 @@ <div id="settings"> <div class="scroll"> - <h1>NOTIFICATIONS</h1> + <h1 aria-label="Current section: Notifications">NOTIFICATIONS</h1> <div class="form"> <div class="toggle-container"> <div class="toggle-row"> @@ -603,7 +628,7 @@ <div id="orders"> <div class="scroll"> - <h1>MY ORDERS</h1> + <h1 aria-label="Current section: My orders">MY ORDERS</h1> <div id="order_list"> <div class="list"></div> <div class="empty">You have no orders.</div> @@ -682,11 +707,11 @@ <!-- CART ================================================ --> <div id="cart"> - <h1> - <span class="full_msg"> + <h1 role="presentation"> + <span class="full_msg" role="heading" aria-label="Current section: Your cart"> YOUR CART / <span class="itemcount"></span> </span> - <span class="empty_msg"> + <span class="empty_msg" role="heading" aria-label="Current section: Your cart is empty"> YOUR CART IS EMPTY </span> </h1> @@ -718,7 +743,7 @@ </div> </div> <div class="cart_item_price"> - <span class="remove"></span> + <span class="remove" aria-label="Remove item from your cart. Item to be removed: {{cleantitle}}"></span> <span class="price">{{price}}</span> </div> </script> @@ -916,7 +941,7 @@ <div id="cart_confirm"> <div class="scroll"> - <h1>CONFIRM</h1> + <h1 aria-label="Current section: Confirm your cart">CONFIRM</h1> <div class="order_section"> <h2>ORDER SUMMARY</h2> @@ -1030,9 +1055,9 @@ </div> <div id="selector"> - <div class="options"> + <div class="options" role="select"> <script type="text/html" class="template"> - <div data-id="{{id}}">{{label}}</div> + <div aria-label="Pick {{label}}" data-id="{{id}}">{{label}}</div> </script> </div> </div> diff --git a/StoneIsland/www/js/lib/cart/CartSummary.js b/StoneIsland/www/js/lib/cart/CartSummary.js index 9b5da7b7..0a45d937 100755 --- a/StoneIsland/www/js/lib/cart/CartSummary.js +++ b/StoneIsland/www/js/lib/cart/CartSummary.js @@ -111,7 +111,8 @@ var CartSummary = ScrollableView.extend({ var t = this.template .replace(/{{image}}/, sdk.image(item['Code10'], '11_f')) .replace(/{{sku}}/, num) - .replace(/{{title}}/, title) + .replace(/{{title}}/g, title) + .replace(/{{cleantitle}}/g, stonewash(title)) .replace(/{{type}}/, type) .replace(/{{size}}/, size_name) .replace(/{{color}}/, color_name) diff --git a/StoneIsland/www/js/lib/etc/accessibility.js b/StoneIsland/www/js/lib/etc/accessibility.js index 5acb0723..ad04980c 100644 --- a/StoneIsland/www/js/lib/etc/accessibility.js +++ b/StoneIsland/www/js/lib/etc/accessibility.js @@ -1,5 +1,10 @@ $(function(){ $("h1").each(function(el){ - $(el).attr('aria-label', "Page title: " + el.innerText) + console.log(el) + el['aria-label'] = 'Section title is ' + el.innerText }) -})
\ No newline at end of file +}) + +function stonewash (s) { + return s.replace(/'0/g, '20').replace(/_/g, ' ') +}
\ No newline at end of file diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js index 4674fc18..b7af235a 100755 --- a/StoneIsland/www/js/lib/products/CollectionView.js +++ b/StoneIsland/www/js/lib/products/CollectionView.js @@ -196,6 +196,7 @@ var CollectionView = ScrollableView.extend({ this.items[ item['Code8'] ] = item var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], is_single_product ? '13_f' : '11_f')) .replace(/{{code8}}/, item['Code8']) + .replace(/{{title}}/, stonewash(item['ModelNames'])) var $t = $(t) if (app.store.ShowProductNameOnCollectionPage) { var $title = $("<span>") @@ -217,6 +218,7 @@ var CollectionView = ScrollableView.extend({ setCollectionName: function(name){ this.collectionName = name this.$title.html(this.collectionName) + this.$title.attr('aria-label', stonewash(this.collectionName)) }, // filter by department diff --git a/StoneIsland/www/js/lib/products/Selector.js b/StoneIsland/www/js/lib/products/Selector.js index 9c1109f6..e3376a4d 100755 --- a/StoneIsland/www/js/lib/products/Selector.js +++ b/StoneIsland/www/js/lib/products/Selector.js @@ -21,7 +21,7 @@ var Selector = View.extend({ options.forEach(function(opt){ this.lookup[String(opt.id)] = opt var t = this.template.replace(/{{id}}/, opt.id) - .replace(/{{label}}/, opt.label) + .replace(/{{label}}/g, opt.label) this.$options.append(t) }.bind(this)) this.$el.show() diff --git a/StoneIsland/www/js/lib/view/Serializable.js b/StoneIsland/www/js/lib/view/Serializable.js index 4155f102..3181fddd 100755 --- a/StoneIsland/www/js/lib/view/Serializable.js +++ b/StoneIsland/www/js/lib/view/Serializable.js @@ -105,6 +105,7 @@ var SerializableView = View.extend({ console.log(errors) var msgs = [] this.$('.error_hilite').removeClass('error_hilite') + this.$('.err').html('') errors.forEach(function(e, i){ // if (i > 0) { return } if (e[0]) { @@ -112,13 +113,15 @@ var SerializableView = View.extend({ var el = $el[0] if (el && el.nodeName === 'SELECT') { $el.parent().addClass('error_hilite') + $el.parent().next('.err').html(e[1]) } else { $el.addClass('error_hilite') + $el.next('.err').html(e[1]) } } - msgs.push(e[1]) + // msgs.push(e[1]) }.bind(this)) - this.$msg.html(msgs.join("<br>")) + // this.$msg.html(msgs.join("<br>")) this.$msg.addClass('alert-notice') }, |