From a0a1eb402d84be81000ed608d3da40a495cc6d34 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 6 May 2020 15:22:04 +0200
Subject: cart accessibility

---
 StoneIsland/config.xml                         |   2 +-
 StoneIsland/www/css/cart.css                   |  13 ++-
 StoneIsland/www/index.html                     | 122 ++++++++++++-------------
 StoneIsland/www/js/index.js                    |   4 +-
 StoneIsland/www/js/lib/auth/SignupView.js      |  11 ++-
 StoneIsland/www/js/lib/cart/CartConfirm.js     |   8 +-
 StoneIsland/www/js/lib/cart/CartPayment.js     |  17 +++-
 StoneIsland/www/js/lib/cart/CartShipping.js    |  11 ++-
 StoneIsland/www/js/lib/cart/CartSummary.js     |  12 ++-
 StoneIsland/www/js/lib/products/GalleryView.js |  45 ++++++---
 StoneIsland/www/js/lib/products/ProductView.js |   4 +-
 11 files changed, 154 insertions(+), 95 deletions(-)

diff --git a/StoneIsland/config.xml b/StoneIsland/config.xml
index 0020fd2f..d400eb3c 100755
--- a/StoneIsland/config.xml
+++ b/StoneIsland/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget android-versionCode="6126" id="us.okfoc.stoneisland" version="1.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget android-versionCode="6132" id="us.okfoc.stoneisland" version="1.3.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>Stone Island</name>
     <description>
         Stone Island
diff --git a/StoneIsland/www/css/cart.css b/StoneIsland/www/css/cart.css
index 36a446a7..eda4cc82 100755
--- a/StoneIsland/www/css/cart.css
+++ b/StoneIsland/www/css/cart.css
@@ -11,7 +11,7 @@
   display: flex;
   flex-direction: row;
 }
-#cart .steps span {
+#cart .steps div {
   display: flex;
   font-size: 1rem;
   text-align: center;
@@ -22,6 +22,9 @@
   justify-content: center;
   align-items: center;
 }
+#cart .steps div span {
+  pointer-events: none;
+}
 .summary_step, .shipping_step {
   border-right: 1px solid #666;
 }
@@ -42,6 +45,14 @@
   overflow: hidden;
   position: relative;
 }
+.vscroll #cart_summary,
+.vscroll #cart_shipping,
+.vscroll #cart_payment,
+.vscroll #cart_confirm,
+.vscroll #cart_thanks,
+.vscroll #cart_error {
+  overflow: auto;
+}
 
 #cart.summary #cart_summary { display: block }
 #cart_summary {
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 67b2038e..17289033 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -304,7 +304,7 @@
     <div class="scroll">
       <h1 role="menuitem" aria-label="Current section: Search">SEARCH</h1>
       <div class="form">
-        <input type="text" class="q" placeholder="ENTER YOUR SEARCH">
+        <input type="text" role="textbox" class="q" placeholder="ENTER YOUR SEARCH">
       </div>
     </div>
   </div>
@@ -383,11 +383,11 @@
           <div class="container-row">
             <span class='err_heading'>There was a problem submitting the form. Please correct the form below and try again.</span>
             <label for="login_email_address">Email Address</label>
-            <input type="email" id="login_email_address" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="1">
+            <input type="email" role="textbox" id="login_email_address" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="1">
             <span class='err'></span>
 
             <label for="login_password">Password</label>
-            <form><input type="password" id="login_password" name="Password" aria-placeholder="PASSWORD" required tabindex="2"></form>
+            <form><input type="password" role="textbox" id="login_password" name="Password" aria-placeholder="PASSWORD" required tabindex="2"></form>
             <span class='err'></span>
           </div>
           <div class="container-fill">
@@ -426,25 +426,25 @@
           <div class="container-row">
           <span class='err_heading'>There was a problem submitting the form. Please correct the form below and try again.</span>
           <label for="signup_name">First Name</label>
-          <input type="text" id="signup_name" name="Name" aria-placeholder="FIRST NAME" required tabindex="1">
+          <input type="text" role="textbox" id="signup_name" name="Name" aria-placeholder="FIRST NAME" required tabindex="1">
           <span class='err'></span>
 
           <label for="signup_surname">Last Name</label>
-          <input type="text" id="signup_surname" name="Surname" aria-placeholder="LAST NAME" required tabindex="2">
+          <input type="text" role="textbox" id="signup_surname" name="Surname" aria-placeholder="LAST NAME" required tabindex="2">
           <span class='err'></span>
 
           <label for="signup_email">Email Address</label>
-          <input type="email" id="signup_email" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="3">
+          <input type="email" role="textbox" id="signup_email" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="3">
           <span class='err'></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">
+          <input type="email" role="textbox" id="signup_confirmemail" name="ConfirmEmail" aria-placeholder="CONFIRM EMAIL ADDRESS" required tabindex="4">
           <span class='err'></span>
 
-          <label for="signup_birthday">Birthday (MM/DD/YYYY)</label>
+          <label for="signup_birthday">Birthday optional (MM/DD/YYYY)</label>
           <div class="select-wrapper date-wrapper">
             <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">
+            <input type="date" id="signup_birthday" name="BirthDay" aria-label="Birthday" min="1900-01-01" aria-placeholder="BIRTHDAY OPTIONAL (MM/DD/YYYY)" required tabindex="5">
           </div>
           <span class='err'></span>
 
@@ -510,21 +510,21 @@
           <div class="container-row">
             <span class='err_heading'>There was a problem submitting the form. Please correct the form below and try again.</span>
             <label for="profile_name">First Name</label>
-            <input type="text" id="profile_name" name="Name" aria-placeholder="FIRST NAME" required tabindex="1">
+            <input type="text" role="textbox" id="profile_name" name="Name" aria-placeholder="FIRST NAME" required tabindex="1">
             <span class='err'></span>
 
             <label for="profile_surname">Last Name</label>
-            <input type="text" id="profile_surname" name="Surname" aria-placeholder="LAST NAME" required tabindex="2">
+            <input type="text" role="textbox" id="profile_surname" name="Surname" aria-placeholder="LAST NAME" required tabindex="2">
             <span class='err'></span>
 
             <label for="profile_email">Email Address</label>
-            <input type="email" id="profile_email" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="3">
+            <input type="email" role="textbox" id="profile_email" name="Email" aria-placeholder="EMAIL ADDRESS" required tabindex="3">
             <span class='err'></span>
 
-            <label for="profile_birthday">Birthday (MM/DD/YYYY)</label>
+            <label for="profile_birthday">Birthday optional (MM/DD/YYYY)</label>
             <div class="select-wrapper date-wrapper">
               <span></span>
-              <input type="date" id="profile_birthday" name="BirthDay" aria-label="Birthday" min="1900-01-01" aria-placeholder="BIRTHDAY (MM/DD/YYYY)" required tabindex="5">
+              <input type="date" id="profile_birthday" name="BirthDay" aria-label="Birthday" min="1900-01-01" aria-placeholder="BIRTHDAY OPTIONAL (MM/DD/YYYY)" required tabindex="5">
             </div>
             <span class='err'></span>
 
@@ -587,7 +587,7 @@
           </div>
           <div class="container-fill">
             <div class="container-message">
-              <span class="msg">
+              <span role="heading" class="msg">
                 * Your personal and payment<br>
                 information will always remain private
               </span>
@@ -613,7 +613,7 @@
           </div>
           <div class="container-fill">
             <div class="container-message">
-              <span class="msg">
+              <span role="heading" class="msg">
                 * Your personal and payment<br>
                 information will always remain private           
               </span>
@@ -747,9 +747,9 @@
     </h1>
 
     <div class="steps">
-      <span role="menuitem" class="summary_step">SUMMARY</span>
-      <span role="menuitem" class="shipping_step">SHIPPING</span>
-      <span role="menuitem" class="payment_step">PAYMENT</span>
+      <div role="menuitem" class="summary_step"><span>SUMMARY</span></div>
+      <div role="menuitem" class="shipping_step"><span>SHIPPING</span></div>
+      <div role="menuitem" class="payment_step"><span>PAYMENT</span></div>
     </div>
     
     <div id="cart_summary" role="region" aria-label="Cart Summary">
@@ -760,16 +760,16 @@
           <div class="rows">
             <script type="text/html" class="template">
               <div class="cart_item_image">
-                <a href="#/store/{{code8}}" aria-label="{{cleantitle}}"><img src="{{image}}"></a>
+                <a href="#/store/{{code8}}" role="link" aria-label="{{cleantitle}}"><img src="{{image}}"></a>
               </div>
               <div class="cart_item_info">
-                <span class="sku" aria-label="SKU">{{sku}}</span>
-                <span class="title" aria-label="Product name: {{cleantitle}}">{{title}}</span>
-                <span class="type" aria-label="Product type">{{type}}</span>
-                <div class="meta">
-                  <div class="meta-size" aria-label="Size"><b>SIZE:</b> {{size}}</div>
-                  <div class="meta-color" aria-label="Color"><b>COLOR:</b> {{color}}</div>
-                  <div class="meta-quantity" aria-label="Quantity"><b>QUANTITY:</b> {{quantity}}</div>
+                <span class="sku">{{sku}}</span>
+                <span class="title">{{title}}</span>
+                <span class="type">{{type}}</span>
+                <div role="list" class="meta">
+                  <div class="meta-size" role="listitem" aria-label="Size: {{size}}"><b>SIZE:</b> {{size}}</div>
+                  <div class="meta-color" role="listitem" aria-label="Color: {{color}}"><b>COLOR:</b> {{color}}</div>
+                  <div class="meta-quantity" role="listitem" aria-label="Quantity: {{quantity}]"><b>QUANTITY:</b> {{quantity}}</div>
                 </div>
               </div>
               <div class="cart_item_price">
@@ -778,20 +778,20 @@
               </div>
             </script>
           </div>
-          <div class="cart-summary">
-          <div class="cart-summary-row">
+          <div class="cart-summary" role="list">
+          <div class="cart-summary-row subtotal_row" role="listitem">
             <span class="label">SUB TOTAL</span>
             <span class="subtotal"></span>
           </div>
-          <div class="cart-summary-row">
+          <div class="cart-summary-row" role="listitem" aria-label="Estimated shipping and handling $0">
             <span class="label">ESTIMATED SHIPPING<br>& HANDLING</span>
             <span class="shipping"></span>
           </div>
-          <div class="cart-summary-row">
+          <div class="cart-summary-row" role="listitem" aria-label="Tax $0">
             <span class="label">TAX</span>
             <span class="tax"></span>
           </div>
-          <div class="cart-summary-row">
+          <div class="cart-summary-row total_row" role="listitem">
             <span class="label">TOTAL</span>
             <span class="total"></span>
           </div>
@@ -812,7 +812,7 @@
         <div class="form">
           <div class="dropdown-wrapper">
             <div class="dropdown-title add_edit">add / edit</div>
-            <div class="dropdown select_address">
+            <div role="menuitem" class="dropdown select_address">
               ADDRESS
             </div>
           </div>
@@ -860,7 +860,7 @@
           <div class="container-row">
             <div class="container-fill">
               <div class="container-message">
-                <span class="msg">
+                <span role="heading" class="msg">
                   * Your personal and payment<br>
                   information will always remain private           
                 </span>
@@ -901,7 +901,7 @@
 
                 <div class="address_dropdown dropdown-wrapper">
                   <div class="dropdown-title add_edit"> </div>
-                  <div class="dropdown select_address">
+                  <div role="menuitem" class="dropdown select_address">
                     BILLING ADDRESS
                   </div>
                 </div>
@@ -926,7 +926,7 @@
 
               <div class="cc_dropdown dropdown-wrapper">
                 <div class="dropdown-title add_edit"></div>
-                <div class="dropdown select_address">
+                <div role="menuitem" class="dropdown select_address">
                   PAYMENT METHOD
                 </div>
               </div>
@@ -949,19 +949,19 @@
               <div class="cc"></div>
 
               <div class="cc_confirm">
-                <h3>PLEASE ENTER YOUR SECURITY CODE TO CONFIRM</h3>
+                <h3>PLEASE ENTER THE SECURITY CODE ON THE BACK OF YOUR CARD TO CONFIRM</h3>
                 <input type="number" name="CvvConfirm" placeholder="SECURITY CODE" required>
               </div>
             </div>
 
             <div class="container-fill">
               <div class="container-message">
-                <span class="msg">
+                <span role="heading" class="msg">
                   * Your personal and payment<br>
                   information will always remain private           
                 </span>
               </div>
-              <a class='privacy-link'> href="#/page/privacy">
+              <a class='privacy-link' role="link" href="#/page/privacy">
                 <div class="privacy-msg">
                   Consult our <u>PRIVACY POLICY</u> for further information.
                 </div>
@@ -981,14 +981,14 @@
 
           <div class="rows">
             <script type="text/html" class="template">
-              <div class="cart_item_info">
+              <div class="cart_item_info" row="table">
                 <span class="sku">{{sku}}</span>
                 <span class="title">{{title}}</span>
                 <span class="type">{{type}}</span>
                 <div class="meta">
-                  <div class="meta-size"><b>SIZE:</b> {{size}}</div>
-                  <div class="meta-color"><b>COLOR:</b> {{color}}</div>
-                  <div class="meta-quantity"><b>QUANTITY:</b> {{quantity}}</div>
+                  <div class="meta-size" role="row" aria-label="Size: {{size}}"><b>SIZE:</b> {{size}}</div>
+                  <div class="meta-color" role="row" aria-label="Color: {{color}}"><b>COLOR:</b> {{color}}</div>
+                  <div class="meta-quantity" role="row" aria-label="Quantity: {{quantity}]"><b>QUANTITY:</b> {{quantity}}</div>
                 </div>
               </div>
               <div class="cart_item_price">
@@ -996,20 +996,20 @@
               </div>
             </script>
           </div>
-          <div class="cart-summary">
-            <div class="cart-summary-row">
+          <div class="cart-summary" row="table">
+            <div class="cart-summary-row subtotal_row" role="row">
               <span class="label">SUB TOTAL</span>
               <span class="subtotal"></span>
             </div>
-            <div class="cart-summary-row">
+            <div class="cart-summary-row" role="row" aria-label="Estimated shipping and handling $0">
               <span class="label">ESTIMATED SHIPPING<br>& HANDLING</span>
               <span class="shipping"></span>
             </div>
-            <div class="cart-summary-row">
+            <div class="cart-summary-row" role="row" aria-label="Tax $0">
               <span class="label">TAX</span>
               <span class="tax"></span>
             </div>
-            <div class="cart-summary-row">
+            <div class="cart-summary-row total_row" role="row">
               <span class="label">TOTAL</span>
               <span class="total"></span>
             </div>
@@ -1108,7 +1108,7 @@
 
 <script type="text/html" id="creditcard_template">
   <label for="creditcard_id_{{_id}}">Credit Card Number</label>
-  <input type="number" id="creditcard_id_{{_id}}" name="Number" aria-placeholder="CREDIT CARD NUMBER" required>
+  <input type="number" role="textbox" id="creditcard_id_{{_id}}" name="Number" aria-placeholder="CREDIT CARD NUMBER" required tabindex="1">
   <span class='err'></span>
 
   <div class="half-input">
@@ -1119,7 +1119,7 @@
   <div class="half-input">
     <div class="select-wrapper">
       <span></span>
-      <select name="ExpirationMonth" id="cc_expiration_month_{{_id}}">
+      <select name="ExpirationMonth" id="cc_expiration_month_{{_id}}" tabindex="2">
         <option value="NONE">EXPIRATION MONTH</option>
         <option value="01">01</option>
         <option value="02">02</option>
@@ -1137,7 +1137,7 @@
     </div>
     <div class="select-wrapper">
       <span></span>
-      <select name="ExpirationYear" id="cc_expiration_year_{{_id}}">
+      <select name="ExpirationYear" id="cc_expiration_year_{{_id}}" tabindex="3">
         <option value="NONE">EXPIRATION YEAR</option>
         <option value="2019">2019</option>
         <option value="2020">2020</option>
@@ -1155,25 +1155,25 @@
     </div>
   </div>
   <label for="cc_cvv_{{_id}}">Security Code</label>
-  <input type="number" id="cc_cvv_{{_id}}" name="Cvv" aria-placeholder="SECURITY CODE" required>
+  <input type="number" id="cc_cvv_{{_id}}" name="Cvv" aria-placeholder="SECURITY CODE" required tabindex="4">
   <span class='err'></span>
 </script>
 
 <script type="text/html" id="address_template">
   <label for="address_name_{{_id}}">First Name</label>
-  <input type="text" id="address_name_{{_id}}" name="Name" aria-placeholder="First Name">
+  <input type="text" role="textbox" id="address_name_{{_id}}" name="Name" aria-placeholder="First Name" tabindex="1">
   <span class="err"></span>
 
   <label for="address_surname_{{_id}}">Last Name</label>
-  <input type="text" id="address_surname_{{_id}}" name="Surname" aria-placeholder="Last Name">
+  <input type="text" role="textbox" id="address_surname_{{_id}}" name="Surname" aria-placeholder="Last Name" tabindex="2">
   <span class="err"></span>
 
   <label for="address_address1_{{_id}}">Address line 1</label>
-  <input type="text" id="address_address1_{{_id}}" name="Address1" aria-placeholder="Address Line 1">
+  <input type="text" role="textbox" id="address_address1_{{_id}}" name="Address1" aria-placeholder="Address Line 1" tabindex="3">
   <span class="err"></span>
 
   <label for="address_address2_{{_id}}">Address line 2</label>
-  <input type="text" id="address_address2_{{_id}}" name="Address2" aria-placeholder="Address Line 2">
+  <input type="text" role="textbox" id="address_address2_{{_id}}" name="Address2" aria-placeholder="Address Line 2" tabindex="4">
   <span class="err"></span>
 
   <div class="half-input">
@@ -1182,10 +1182,10 @@
   </div>
 
   <div class="half-input">
-    <input type="text" id="address_city_{{_id}}" name="City" aria-placeholder="City">
+    <input type="text" role="textbox" id="address_city_{{_id}}" name="City" aria-placeholder="City" tabindex="5">
     <div class="select-wrapper">
       <span></span>
-      <select id="address_state_{{_id}}" name="Province">
+      <select id="address_state_{{_id}}" name="Province" tabindex="6">
         {{PROVINCES}}
       </select>
     </div>
@@ -1197,19 +1197,19 @@
   </div>
 
   <div class="half-input">
-    <input type="text" id="address_zip_{{_id}}" name="ZipCode" aria-placeholder="ZIP" required>
+    <input type="text" role="textbox" id="address_zip_{{_id}}" name="ZipCode" aria-placeholder="ZIP" required tabindex="7">
     <div class="country-wrapper-static">
       <span class="country-label">UNITED STATES</span>
 <!-- 
       <div id="country-select">
-        <input type="text" name="Country" placeholder="UNITED STATES" required>
+        <input type="text" role="textbox" name="Country" placeholder="UNITED STATES" required>
       </div>
  -->
     </div>
   </div>
 
   <label for="address_phone_{{_id}}">Phone Number</label>
-  <input type="number" id="address_phone_{{_id}}" name="Phone" aria-placeholder="PHONE NUMBER">
+  <input type="number" id="address_phone_{{_id}}" name="Phone" aria-placeholder="PHONE NUMBER" tabindex="8">
   <span class="err"></span>
 <!--
   <div class="checkbox-container save_as_default">
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index 42cec6f1..8574372d 100755
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -22,7 +22,9 @@ var app = (function(){
   
   app.bind = function(){
     document.addEventListener('touchmove', function(e){ e.preventDefault() })
-    FastClick.attach(document.body)
+    if (!app.accessible) {
+      FastClick.attach(document.body)
+    }
   }
   
   app.build = function(){
diff --git a/StoneIsland/www/js/lib/auth/SignupView.js b/StoneIsland/www/js/lib/auth/SignupView.js
index 18fecebb..8ae47728 100755
--- a/StoneIsland/www/js/lib/auth/SignupView.js
+++ b/StoneIsland/www/js/lib/auth/SignupView.js
@@ -49,7 +49,7 @@ var SignupView = FormView.extend({
     "Surname": "Please enter your last name.",
     "Email": "Please enter a valid email address.",
     "ConfirmEmail": "Please enter a valid email address.",
-    "BirthDay": "Please enter your birthday. You must be 18 or older to use the Stone Island app.",
+    // "BirthDay": "Please enter your birthday. You must be 18 or older to use the Stone Island app.",
     "Password": "Please enter your password.",
     "Password2": "Please enter your password again.",
     "DataProfiling": "You must consent to data profiling to use the Stone Island app.",
@@ -77,15 +77,18 @@ var SignupView = FormView.extend({
     }
 
     var now = new Date ()
-    var year = now.getFullYear()
+    var year = now.getFullYear() - 18
     if (! data.BirthDay) {
       data.BirthDay = year + '-01-01'
     }
     // if (data.BirthDay.split('-')[0] || '2018')
     var birthday = new Date (data.BirthDay)
-    if (isNaN(birthday) || (new Date () - birthday) / (365*24*60*60*1000) < 18) {
-      errors.push(['BirthDay', 'You must be 18 or older to use the Stone Island app.'])
+    if (isNaN(birthday)) {
+      data['BirthDay'] = '1970-01-01'
     }
+    // if (isNaN(birthday) || (new Date () - birthday) / (365*24*60*60*1000) < 18) {
+    //   errors.push(['BirthDay', 'You must be 18 or older to use the Stone Island app.'])
+    // }
 
     data.YooxLetter = this.$("[name=YooxLetter]").prop("checked")
     if (!data.YooxLetter) {
diff --git a/StoneIsland/www/js/lib/cart/CartConfirm.js b/StoneIsland/www/js/lib/cart/CartConfirm.js
index 6909dcc3..11d529ff 100755
--- a/StoneIsland/www/js/lib/cart/CartConfirm.js
+++ b/StoneIsland/www/js/lib/cart/CartConfirm.js
@@ -90,9 +90,9 @@ var CartConfirm = FormView.extend({
                     .replace(/{{sku}}/, num)
                     .replace(/{{title}}/, title)
                     .replace(/{{type}}/, type)
-                    .replace(/{{size}}/, size_name || "DEFAULT")
-                    .replace(/{{color}}/, color_name || "DEFAULT")
-                    .replace(/{{quantity}}/, 1)
+                    .replace(/{{size}}/g, size_name || "DEFAULT")
+                    .replace(/{{color}}/g, color_name || "DEFAULT")
+                    .replace(/{{quantity}}/g, 1)
                     .replace(/{{price}}/, as_cash(details.Item.Price.DiscountedPrice))
         $el.data("price", details.Item.Price.DiscountedPrice)
         $el.html(t)
@@ -109,6 +109,8 @@ var CartConfirm = FormView.extend({
     this.$shipping.html( as_cash(shipping_cost) )
     this.$tax.html( as_cash(tax) )
     this.$total.html( as_cash(total) )
+    this.$(".subtotal_row").attr('aria-label', "Subtotal " + as_cash(subtotal))
+    this.$(".total_row").attr('aria-label', "Total " + as_cash(total))
 
     if (data.Receiver) {
       var street = data.Receiver.StreetWithNumber.replace(/\n$/,"").replace("\n", ", ")
diff --git a/StoneIsland/www/js/lib/cart/CartPayment.js b/StoneIsland/www/js/lib/cart/CartPayment.js
index 40d08d9e..0e4c3b84 100755
--- a/StoneIsland/www/js/lib/cart/CartPayment.js
+++ b/StoneIsland/www/js/lib/cart/CartPayment.js
@@ -73,6 +73,10 @@ var CartPayment = FormView.extend({
     this.address.disabled = this.address_list_mode
     this.$address_form.toggle(! this.address_list_mode)
     this.$address_list.toggle(this.address_list_mode)
+    this.scroller.refresh()
+    this.$("input,select").map(function(i) {
+      this.setAttribute('tabindex', i+1)
+    })
   },
 
   toggle_cc: function(state){
@@ -86,6 +90,10 @@ var CartPayment = FormView.extend({
     this.$cc_form.toggle(! this.cc_list_mode)
     this.$cc_list.toggle(this.cc_list_mode)
     this.$cc_confirm.toggle(this.cc_list_mode)
+    this.scroller.refresh()
+    this.$("input,select").map(function(i) {
+      this.setAttribute('tabindex', i+1)
+    })
   },
 
   focus_on_cc: function(e){
@@ -104,8 +112,8 @@ var CartPayment = FormView.extend({
     this.toggle_address( !! app.account.ccs.length )
     this.toggle_cc( !! app.account.ccs.length )
 
-    app.account.ccs.forEach(function(cc){
-      var address_t = this.address_template.replace(/{{id}}/g, cc.Id)
+    app.account.ccs.forEach(function(cc, i){
+      var address_t = this.address_template.replace(/{{id}}/g, (cc.Id || i))
                            .replace(/{{checked}}/g, cc.IsDefault ? "checked" : "")
                            .replace(/{{name}}/g, (cc.Name + " " + cc.Surname).toUpperCase())
                            .replace(/{{address}}/g, cc.Address.replace(/\n$/,"").replace("\n", ", "))
@@ -113,7 +121,7 @@ var CartPayment = FormView.extend({
                            .replace(/{{state}}/g, cc.Province)
                            .replace(/{{zip}}/g, cc.ZipCode)
 
-      var cc_t = this.cc_template.replace(/{{id}}/g, cc.Id)
+      var cc_t = this.cc_template.replace(/{{id}}/g, (cc.Id || i))
                            .replace(/{{checked}}/g, cc.IsDefault ? "checked" : "")
                            .replace(/{{number}}/g, cc['Number'])
                            .replace(/{{type}}/g, cc.Type.toUpperCase())
@@ -122,6 +130,9 @@ var CartPayment = FormView.extend({
       this.$address_list.append(address_t)
       this.$cc_list.append(cc_t)
     }.bind(this))
+    this.$("input,select").map(function(i) {
+      this.setAttribute('tabindex', i+1)
+    })
   },
 
   finalize: function(data){
diff --git a/StoneIsland/www/js/lib/cart/CartShipping.js b/StoneIsland/www/js/lib/cart/CartShipping.js
index b5d6647b..157e75f5 100755
--- a/StoneIsland/www/js/lib/cart/CartShipping.js
+++ b/StoneIsland/www/js/lib/cart/CartShipping.js
@@ -43,8 +43,8 @@ var CartShipping = FormView.extend({
       this.toggle_dropdown(false)
       return
     }
-    app.account.addresses.forEach(function(address){
-      var t = this.template.replace(/{{id}}/g, address.Id)
+    app.account.addresses.forEach(function(address, i){
+      var t = this.template.replace(/{{id}}/g, (address.Id || i))
                            .replace(/{{checked}}/g, address.IsDefault ? "checked" : "")
                            .replace(/{{name}}/g, (address.Name + " " + address.Surname).toUpperCase())
                            .replace(/{{address}}/g, address.Address.replace(/\n$/,"").replace("\n", ", "))
@@ -69,6 +69,9 @@ var CartShipping = FormView.extend({
       $("#standard-shipping").prop("checked", cart_data.Cart.DeliveryMethod.Type == 1)
       $("#express-shipping").prop("checked", cart_data.Cart.DeliveryMethod.Type == 2)
     }
+    this.$("input,select").map(function(i) {
+      this.setAttribute('tabindex', i+1)
+    })
   },
   
   toggle_dropdown: function(state){
@@ -80,6 +83,10 @@ var CartShipping = FormView.extend({
     this.address.disabled = this.list_mode
     this.$address_form.toggle(! this.list_mode)
     this.$address_list.toggle(this.list_mode)
+    this.scroller.refresh()
+    this.$("input,select").map(function(i) {
+      this.setAttribute('tabindex', i+1)
+    })
   },
   
   // sdk.cart.set_shipping_address
diff --git a/StoneIsland/www/js/lib/cart/CartSummary.js b/StoneIsland/www/js/lib/cart/CartSummary.js
index 51aa35ef..9637ae35 100755
--- a/StoneIsland/www/js/lib/cart/CartSummary.js
+++ b/StoneIsland/www/js/lib/cart/CartSummary.js
@@ -112,11 +112,11 @@ var CartSummary = ScrollableView.extend({
                     .replace(/{{sku}}/g, num)
                     .replace(/{{code8}}/g, data['Code8'])
                     .replace(/{{title}}/g, title)
-                    .replace(/{{cleantitle}}/g, stonewash(title))
+                    .replace(/{{cleantitle}}/g, num + ' ' + stonewash(title) + ' ' + descriptions['MicroCategory'])
                     .replace(/{{type}}/, type)
-                    .replace(/{{size}}/, size_name)
-                    .replace(/{{color}}/, color_name)
-                    .replace(/{{quantity}}/, 1)
+                    .replace(/{{size}}/g, size_name)
+                    .replace(/{{color}}/g, color_name)
+                    .replace(/{{quantity}}/g, 1)
                     .replace(/{{price}}/, as_cash(details.Item.Price.DiscountedPrice))
         $el.html(t)
         this.refreshScroller()
@@ -129,6 +129,7 @@ var CartSummary = ScrollableView.extend({
     
     this.updateTotals()
 
+    this.$cart_empty.hide()
     this.el.className = "full"
     this.refreshScroller()
     app.curtain.hide("loading")
@@ -149,6 +150,8 @@ var CartSummary = ScrollableView.extend({
     this.$shipping.html( as_cash(shipping_cost) )
     this.$tax.html( as_cash(tax) )
     this.$total.html( as_cash(total) )
+    this.$(".subtotal_row").attr('aria-label', "Subtotal " + as_cash(subtotal))
+    this.$(".total_row").attr('aria-label', "Total " + as_cash(total))
   },
   
   empty: function(){
@@ -158,6 +161,7 @@ var CartSummary = ScrollableView.extend({
     this.parent.$itemcount.html("0 ITEMS")
     this.el.className = "empty"
     this.parent.$steps.hide()
+    this.$cart_empty.show()
     app.curtain.hide("loading")
   },
 
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index 809ba0d9..417b14c3 100755
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -59,20 +59,13 @@ var GalleryView = View.extend({
       draggable: true,
     })
     if (app.accessible) {
-      gallery.select(1, false, true)
+      gallery.select(1, true, true)
     }
 
-    this.gallery.on('change', function(){
-      var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
-      var partz = currentImage.split("_")
-      var head = partz[0]
-      var size = partz[1]
-      var tail = partz[2]
-      var end_partz = tail.split(/\./)
-      var style = end_partz[0]
-      var label = YOOX_IMAGE_STYLE_LABELS[style] || "Image: Alternate view"
-      $("#product .gallery-target").attr('aria-label', label)
-    })
+    var last_style = 'f'
+    this.gallery.on('select', function(){
+      this.updateLabel()
+    }.bind(this))
 
     this.gallery.on('staticClick', this.static_click.bind(this))
 
@@ -94,10 +87,36 @@ var GalleryView = View.extend({
     var largest_size = this.large_styles[style]
     var title = YOOX_IMAGE_STYLE_LABELS[style] || "Alternate view"
     var hiresImage = [head, largest_size, tail].join("_")
-    console.log(partz, style)
+    // console.log(partz, style)
     app.fullscreenViewer.show(currentImage, hiresImage, title)
   },
 
+  animating: false,
+  previous: function(e){
+    this.gallery.previous()
+    this.updateLabel()
+  },
+  next: function(e){
+    this.gallery.next()
+    this.updateLabel()
+  },
+  updateLabel: function(){
+    var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
+    var partz = currentImage.split("_")
+    var head = partz[0]
+    var size = partz[1]
+    var tail = partz[2]
+    var end_partz = tail.split(/\./)
+    var style = end_partz[0]
+    if (style === this.last_style) {
+      style = 'z'
+    }
+    this.last_style = style
+    var label = YOOX_IMAGE_STYLE_LABELS[style] || "Image: Alternate view"
+    console.log("> new style: " + style)
+    $("#product .gallery-target").attr('aria-label', label)
+  },
+
   touchstart: function(e){
   },
   touchmove: function(e){
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index f834b1c5..570024b6 100755
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -74,10 +74,10 @@ var ProductView = ScrollableView.extend({
   cache: {},
   
   gallery_left: function(){
-    app.product.gallery.gallery.previous()
+    app.product.gallery.previous()
   },
   gallery_right: function(){
-    app.product.gallery.gallery.next()
+    app.product.gallery.next()
   },
   
   find: function(code, cb){
-- 
cgit v1.2.3-70-g09d2