From 5fc9d6379864a4b77105da863327cf36772354e2 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.zhang@supernovacompanies.biz>
Date: Thu, 12 Apr 2018 10:14:28 +0800
Subject: [PATCH] optimize web accessbility by adding aria-label and role
 attributes to nodes where needed

---
 src/components/Chrome.vue               |  2 +-
 src/components/Compact.vue              |  1 +
 src/components/Grayscale.vue            |  1 +
 src/components/Photoshop.vue            |  8 ++++----
 src/components/Sketch.vue               |  1 +
 src/components/Slider.vue               |  3 ++-
 src/components/Swatches.vue             |  1 +
 src/components/common/EditableInput.vue | 22 ++++++++++++----------
 src/components/common/Hue.vue           |  2 +-
 src/components/common/Saturation.vue    |  4 ++--
 10 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/Chrome.vue b/src/components/Chrome.vue
index 19a42f7..31306a7 100644
--- a/src/components/Chrome.vue
+++ b/src/components/Chrome.vue
@@ -58,7 +58,7 @@
           </div>
         </div>
         <!-- btn -->
-        <div class="vc-chrome-toggle-btn" @click="toggleViews">
+        <div class="vc-chrome-toggle-btn" aria-label="toggleViews" @click="toggleViews">
           <div class="vc-chrome-toggle-icon">
             <svg style="width:24px; height:24px" viewBox="0 0 24 24" 
               @mouseover="showHighlight" 
diff --git a/src/components/Compact.vue b/src/components/Compact.vue
index 79881f0..8197754 100644
--- a/src/components/Compact.vue
+++ b/src/components/Compact.vue
@@ -2,6 +2,7 @@
   <div class="vc-compact">
     <ul class="vc-compact-colors">
       <li class="vc-compact-color-item" v-for="c in palette" :key="c"
+        :aria-label="'color:' + c"
         @click="handlerClick(c)"
         :class="{'vc-compact-color-item--white': c === '#FFFFFF' }"
         :style="{background: c}">
diff --git a/src/components/Grayscale.vue b/src/components/Grayscale.vue
index 6bfad23..c6b6174 100644
--- a/src/components/Grayscale.vue
+++ b/src/components/Grayscale.vue
@@ -2,6 +2,7 @@
   <div class="vc-grayscale">
     <ul class="vc-grayscale-colors">
       <li class="vc-grayscale-color-item" v-for="c in palette" :key="c"
+        :aria-label="'color:' + c"
         @click="handlerClick(c)"
         :class="{'vc-grayscale-color-item--white': c == '#FFFFFF'}"
         :style="{background: c}">
diff --git a/src/components/Photoshop.vue b/src/components/Photoshop.vue
index bb6d768..d061063 100644
--- a/src/components/Photoshop.vue
+++ b/src/components/Photoshop.vue
@@ -16,14 +16,14 @@
         <div class="vc-ps-previews">
           <div class="vc-ps-previews__label">new</div>
           <div class="vc-ps-previews__swatches">
-            <div class="vc-ps-previews__pr-color" :style="{background: colors.hex}"></div>
-            <div class="vc-ps-previews__pr-color" :style="{background: currentColor}" @click="clickCurrentColor"></div>
+            <div class="vc-ps-previews__pr-color" :aria-label="'newColor:' + colors.hex" :style="{background: colors.hex}"></div>
+            <div class="vc-ps-previews__pr-color" :aria-label="'currentColor:' + currentColor" :style="{background: currentColor}" @click="clickCurrentColor"></div>
           </div>
           <div class="vc-ps-previews__label">current</div>
         </div>
         <div class="vc-ps-actions" v-if="!disableFields">
-          <div class="vc-ps-ac-btn" @click="handleAccept">OK</div>
-          <div class="vc-ps-ac-btn" @click="handleCancel">Cancel</div>
+          <div class="vc-ps-ac-btn" aria-label="confirm" @click="handleAccept">OK</div>
+          <div class="vc-ps-ac-btn" aria-label="cancel" @click="handleCancel">Cancel</div>
           <div class="vc-ps-fields">
             <!-- hsla -->
             <ed-in label="h" desc="°" :value="hsv.h" @change="inputChange"></ed-in>
diff --git a/src/components/Sketch.vue b/src/components/Sketch.vue
index 58f2ed1..a2ebf70 100644
--- a/src/components/Sketch.vue
+++ b/src/components/Sketch.vue
@@ -37,6 +37,7 @@
     </div>
     <div class="vc-sketch-presets">
       <div class="vc-sketch-presets-color"
+        :aria-label="'color:'+c"
         v-for="c in presetColors"
         :key="c"
         :style="{background: c}"
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
index 60aca26..2e415c0 100644
--- a/src/components/Slider.vue
+++ b/src/components/Slider.vue
@@ -4,9 +4,10 @@
       <hue v-model="colors" @change="hueChange"></hue>
     </div>
     <div class="vc-slider-swatches">
-      <div class="vc-slider-swatch" v-for="(offset, index) in swatches" :data-index="index"
+      <div class="vc-slider-swatch" v-for="(offset, index) in swatches" :key="index" :data-index="index"
         @click="handleSwClick(index, offset)">
         <div class="vc-slider-swatch-picker"
+        :aria-label="'color:' + 'hsl(' + colors.hsl.h + ', 50%, ' + (offset * 100) + '%)'"
         :class="{'vc-slider-swatch-picker--active': offset == activeOffset}"
         :style="{background: 'hsl(' + colors.hsl.h + ', 50%, ' + (offset * 100) + '%)'}"
         ></div>
diff --git a/src/components/Swatches.vue b/src/components/Swatches.vue
index 79a147f..c1eef6b 100644
--- a/src/components/Swatches.vue
+++ b/src/components/Swatches.vue
@@ -3,6 +3,7 @@
     <div class="vc-swatches-box">
       <div class="vc-swatches-color-group" v-for="(group, $idx) in palette" :key="$idx">
         <div :class="['vc-swatches-color-it', {'vc-swatches-color--white': c === '#FFFFFF' }]"
+          :aria-label="'color:' + c"
           v-for="c in group" :key="c"
           :data-color="c"
           :style="{background: c}"
diff --git a/src/components/common/EditableInput.vue b/src/components/common/EditableInput.vue
index df121b6..0d9d40a 100644
--- a/src/components/common/EditableInput.vue
+++ b/src/components/common/EditableInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vc-editable-input">
     <input class="vc-input__input"
-      :aria-label="value"
+      :aria-label="desc?label+'('+desc+')':label"
       v-model="val"
       @keydown="handleKeyDown"
       @input="update"
@@ -53,9 +53,10 @@ export default {
         this.$emit('change', data)
       }
     },
-    handleBlur (e) {
-      console.log(e)
-    },
+    // **** unused 
+    // handleBlur (e) {
+    //   console.log(e)
+    // },
     handleKeyDown (e) {
       let val = this.val
       let number = Number(val)
@@ -77,13 +78,14 @@ export default {
           e.preventDefault()
         }
       }
-    },
-    handleDrag (e) {
-      console.log(e)
-    },
-    handleMouseDown (e) {
-      console.log(e)
     }
+    // **** unused 
+    // handleDrag (e) {
+    //   console.log(e)
+    // },
+    // handleMouseDown (e) {
+    //   console.log(e)
+    // }
   }
 }
 </script>
diff --git a/src/components/common/Hue.vue b/src/components/common/Hue.vue
index 7704ece..daa4ea3 100644
--- a/src/components/common/Hue.vue
+++ b/src/components/common/Hue.vue
@@ -5,7 +5,7 @@
       @touchmove="handleChange"
       @touchstart="handleChange">
       <div class="vc-hue-pointer" :style="{top: pointerTop, left: pointerLeft}">
-        <div class="vc-hue-picker"></div>
+        <div role="huePicker" class="vc-hue-picker"></div>
       </div>  
     </div>
   </div>
diff --git a/src/components/common/Saturation.vue b/src/components/common/Saturation.vue
index 49fa9ac..b99d86e 100644
--- a/src/components/common/Saturation.vue
+++ b/src/components/common/Saturation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vc-saturation"
+  <div role="saturationPanel" class="vc-saturation"
     :style="{background: bgColor}"
     ref="container"
     @mousedown="handleMouseDown"
@@ -7,7 +7,7 @@
     @touchstart="handleChange">
     <div class="vc-saturation--white"></div>
     <div class="vc-saturation--black"></div>
-    <div class="vc-saturation-pointer" :style="{top: pointerTop, left: pointerLeft}">
+    <div role="currentSaturationPointer" class="vc-saturation-pointer" :style="{top: pointerTop, left: pointerLeft}">
       <div class="vc-saturation-circle"></div>
     </div>
   </div>