optimize web accessbility

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>