a11y updates

6 files changed, 57 insertions, 10 deletions

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()