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/www/index.html | 122 ++++++++++++++++++++++-----------------------
 1 file changed, 61 insertions(+), 61 deletions(-)

(limited to 'StoneIsland/www/index.html')

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">
-- 
cgit v1.2.3-70-g09d2