a11y updates

11 files changed, 110 insertions, 31 deletions

diff --git a/StoneIsland/scripts/plist-hook.js b/StoneIsland/scripts/plist-hook.js
index a1827079..623080f0 100644
--- a/StoneIsland/scripts/plist-hook.js
+++ b/StoneIsland/scripts/plist-hook.js
@@ -9,6 +9,8 @@ module.exports = function (context) {
     var obj = plist.parse(xml);
 
     obj.NSLocationWhenInUseUsageDescription = "Stone Island needs to serve content based on your location."
+    obj.NSLocationAlwaysAndWhenInUseUsageDescription = "Stone Island needs to serve content based on your location."
+    obj.NSLocationAlwaysUsageDescription = "Stone Island needs to serve content based on your location."
 
     xml = plist.build(obj);
     fs.writeFileSync(FILEPATH, xml, { encoding: 'utf8' });
diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index f857db9e..c4b74c19 100755
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -186,6 +186,9 @@
   height:100px;
   box-sizing:border-box
 }
+.vscroll .fade-cover {
+  display: none;
+}
 
 /*
 .fade-cover::before {
@@ -264,6 +267,13 @@ ul.links {
   transform-origin: 50% 50%;
   transform: translateZ(0) translateX(-50%) translateY(-50%);
 }
+#archive .menu {
+  position: fixed;
+  display: none;
+}
+#archive.menu .menu {
+  display: block;
+}
 
 .accessible #archive .row .image,
 .accessible #archive .row .text {
@@ -353,6 +363,16 @@ ul.links {
   width: 90%;
 }
 
+.gallery-target {
+  display: none;
+}
+.accessible .gallery-target {
+  display: block;
+  position: absolute;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 52vh;
+}
 .gallery-video-post {
   position:relative;
 }
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 5efef660..e15e0e54 100755
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -55,6 +55,7 @@
 }
 
 .gallery .item {
+  display: block;
   width: 100vw;
   height: 52vh;
   background-size: contain;
@@ -93,6 +94,11 @@
   text-align: center;
   width: 100%;
 }
+#closed .closed_target {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+}
 
 .product .content {
   box-sizing:border-box;
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 06f4455f..a422832c 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -138,10 +138,11 @@
         <script type="text/html" class="template">
           <div class="hub_item" data-id="{{id}}">
             <div class="gallery gallery-{{id}}" role="carousel"></div>
+            <div role="button" class="gallery-target gallery-target-{{id}}"></div>
             <div role="button" aria-label='Scroll gallery to the left' class="gallery-left"></div>
             <div role="button" aria-label='Scroll gallery to the right' class="gallery-right"></div>
             <div role="heading" class="content-header">
-              <div role="button" class="content-share">
+              <div role="button" class="content-share" aria-label="Share this post">
                 SHARE +
               </div>
               <span role="heading" aria-details="{{cleantitle}}" class="title">{{title}}</span>
@@ -312,6 +313,7 @@
           <div role="link" class="item" aria-label="{{alt}}" style="background-image:url({{image}})"></div>
         </script>
       </div>
+      <div role="button" class="gallery-target"></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">
@@ -335,7 +337,7 @@
             </div>
           </div>
         </span>
-        <span role="button" class="share">SHARE +</span>
+        <span role="button" class="share" aria-label="Share this product">SHARE +</span>
         </div>
         <div class="fit">Fits Large</div>
         <div class='fitHeader'></div>
@@ -352,15 +354,16 @@
   </div>
   
   <div id="closed" role="region" aria-label="The store is closed">
+    <div class="closed_target" role="button" aria-label="The store is closed. Placeholder image of a Stone Island model wearing a jacket."></div>
     <div class="closed_store_msg">
       <h3>
         LOADING THE STORE, PLEASE WAIT
       </h3>
       <h4>
       </h4>
-      <div role="link" class="website_link">
+      <div role="link" class="website_link" aria-label='Visit w w w dot stone island dot com'>
         visit<br>
-        <b aria-label='w w w dot stone island dot com'>www.stoneisland.com</b>
+        <b role='link' aria-label='w w w dot stone island dot com'>www.stoneisland.com</b>
       </div>
     </div>
   </div>
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index b90f74b1..42cec6f1 100755
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -12,26 +12,11 @@ var app = (function(){
       sdk.init({ env: "production" })
     }
 
-    accessibility.init(app.prebuild) // check if we can do native scrolling before build
-  }
-
-  app.prebuild = function(){
-    app.bind()
-    app.build()
-    
-    app.iscroll_options = {
-      mouseWheel: true,
-      scrollbars: true,
-      disablePointer: is_android ? true : false, // important to disable the pointer events that causes the issues
-      disableTouch: false, // false if you want the slider to be usable with touch devices
-      disableMouse: false // false if you want the slider to be usable with a mouse (desktop)
-    }
-
     if (window.cordova) {
-      document.addEventListener('deviceready', app.ready, false)
+      document.addEventListener('deviceready', app.device_ready, false)
     }
     else {
-      app.ready()
+      app.device_ready()
     }
   }
   
@@ -77,8 +62,24 @@ var app = (function(){
 	  app.selector = new Selector ()
   }
   
+  app.device_ready = function(){
+    accessibility.init(app.ready) // check if we can do native scrolling before build
+  }
+
   app.ready = function(){
     console.log(">> READY")
+
+    app.bind()
+    app.build()
+    
+    app.iscroll_options = {
+      mouseWheel: true,
+      scrollbars: true,
+      disablePointer: is_android ? true : false, // important to disable the pointer events that causes the issues
+      disableTouch: false, // false if you want the slider to be usable with touch devices
+      disableMouse: false // false if you want the slider to be usable with a mouse (desktop)
+    }
+
     if (window.cordova) {
       document.addEventListener('pause', app.paused, false)
       document.addEventListener('resume', app.resumed, false)
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 2fd2497b..92427b6f 100755
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -60,7 +60,7 @@ var ArchiveView = ScrollableView.extend({
     this.data.forEach(function(row, index){
       var t = this.menu_template.replace(/{{title}}/, row.title)
       var $t = $(t)
-      $t.data("aria-label", stonewash(row.title.replace(/'/g, " '").trim()))
+      $t.data("aria-label", stonewash(row.title.replace(/'0/g, " 20").replace(/'9/g, " 19").trim()))
       $t.data("title", row.title)
       $t.data("index", index)
       this.$menu_items.append($t)
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index a0ee9dd0..d3b15f77 100755
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -94,10 +94,18 @@ var HubView = ScrollableView.extend({
         app.fullscreenViewer.show(url, url)
       })
       $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.")
+      if (accessibility.voiceOver) {
+        $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.")
+        $(".gallery-target-" + row.id).click(function(e){
+          e && e.preventDefault()
+          var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
+          app.fullscreenViewer.show(url, url)
+        })
+      }
     }
     else {
       // single image
-      var el = document.createElement("div")
+      var el = document.createElement(accessibility.voiceOver ? "a" : "div")
       if (row.image && row.image.length) {
         el.style.backgroundImage = "url(" + row.image[0].uri + ")"
       }
@@ -112,16 +120,28 @@ var HubView = ScrollableView.extend({
         $(".gallery-" + row.id).addClass("gallery-video-post")
         $(".gallery-" + row.id).attr('role', 'link')
         $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Tap to watch the video on Youtube")
+        // $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Tap to watch the video on Youtube")
         if (! row.image) {
           var url = row.link
           var ytid = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
           e.style.backgroundImage = "url(https://i.ytimg.com/vi/" + ytid + "/maxresdefault.jpg"
         }
+        // $(".gallery-target-" + row.id).click(function(e){
+        //   e && e.preventDefault()
+        //   window.open(row.link, '_system')
+        // })
+        $(".gallery-target-" + row.id).remove()
       } else {
-        $(el).click(function(){
+        $(el).click(function(e){
+          e && e.preventDefault()
           app.fullscreenViewer.show(row.image[0].uri)
         })
         $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image")
+        $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image.")
+        $(".gallery-target-" + row.id).click(function(e){
+          e && e.preventDefault()
+          app.fullscreenViewer.show(row.image[0].uri)
+        })
       }
       $t.find(".gallery-left").remove()
       $t.find(".gallery-right").remove()
diff --git a/StoneIsland/www/js/lib/etc/accessibility.js b/StoneIsland/www/js/lib/etc/accessibility.js
index 8108e461..31ddaf23 100644
--- a/StoneIsland/www/js/lib/etc/accessibility.js
+++ b/StoneIsland/www/js/lib/etc/accessibility.js
@@ -17,8 +17,10 @@ var accessibility = (function() {
       return ready()
     }
     if ('MobileAccessibility' in window) {
+      console.log('init accessibility')
       accessibility.build(ready)
     } else {
+      console.log('MobileAccessibility not found')
       ready()
     }
   }
diff --git a/StoneIsland/www/js/lib/nav/FooterView.js b/StoneIsland/www/js/lib/nav/FooterView.js
index 8641668f..855c37bd 100755
--- a/StoneIsland/www/js/lib/nav/FooterView.js
+++ b/StoneIsland/www/js/lib/nav/FooterView.js
@@ -17,12 +17,14 @@ var FooterView = View.extend({
     if (cancel) {
       this.$ok.removeClass("wide")
       this.$cancel.show().html(cancel)
+      this.$cancel.attr('aria-label', cancel.toLowerCase())
     }
     else {
       this.$ok.addClass("wide")
       this.$cancel.hide()
     }
     this.$ok.html(ok)
+    this.$ok.attr('aria-label', ok.toLowerCase())
     this.$el.show()
   },
 
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index d6f5723c..e84caa68 100755
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -58,19 +58,40 @@ var GalleryView = View.extend({
       draggable: true,
     })
 
-    this.gallery.on('staticClick', function(e){
-      var currentImage = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
+    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 largest_size = large_styles[style]
-      var hiresImage = [head, largest_size, tail].join("_")
-      app.fullscreenViewer.show(currentImage, hiresImage)
+      var label = YOOX_IMAGE_STYLE_LABELS[style] || "Image: Alternate view"
+      $("#product .gallery-target").attr('aria-label', label)
     })
+
+    this.gallery.on('staticClick', this.static_click.bind(this))
+
+    if (accessibility.voiceOver) {
+      $("#product .gallery-target").click(this.static_click.bind(this))
+      $("#product .gallery-target").attr('aria-label', "Image: Front view")
+    } else {
+      $("#product .gallery-target").remove()
+    }
   },
+  static_click: function(e){
+    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 largest_size = large_styles[style]
+    var hiresImage = [head, largest_size, tail].join("_")
+    app.fullscreenViewer.show(currentImage, hiresImage)
+  },
+
   touchstart: function(e){
   },
   touchmove: function(e){
@@ -82,7 +103,7 @@ var GalleryView = View.extend({
 
 var YOOX_IMAGE_STYLE_ORDER = "ZZZ f r d e a b c g l".split(" ")
 var YOOX_IMAGE_STYLE_LABELS = {
-  f: 'Front view',
-  r: 'Rear view',
+  f: 'Image: Front view',
+  r: 'Image: Rear view',
 }
 function sort_image_styles (b,a){ return (YOOX_IMAGE_STYLE_ORDER.indexOf(b)) - (YOOX_IMAGE_STYLE_ORDER.indexOf(a)) }
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 4320043c..f834b1c5 100755
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -370,12 +370,14 @@ var ProductView = ScrollableView.extend({
   set_size_label: function(size_label){
     this.$size.show()
     this.$sizeLabel.html(size_label)
+    this.$size.attr('aria-label', 'Tap to select size. Current size: ' + size_label)
   },
 
   set_color_label: function(color_label){
     if (color_label) {
       this.$color.show()
       this.$colorLabel.html(color_label)
+      this.$color.attr('aria-label', 'Tap to select color. Current color: ' + color_label)
     }
     else {
       this.$color.hide()