optimize web accessbility by adding aria-label and role attributes to…

… nodes where needed

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" 

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}">

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}">

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>

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}"

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>

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}"

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>

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>

src/components/common/Saturation.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="vc-saturation"
+  <div role="saturationPanel" class="vc-saturation"
     :style="{background: bgColor}"
     ref="container"
     @mousedown="handleMouseDown"
     @touchmove="handleChange"
     @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>