Merge remote-tracking branch 'origin/feat/2.7.0'

xiaokaike · Oct 10, 2018 · a121064 · a121064
2 parents 18523a0 + 7b02c4f
commit a121064
Show file tree

Hide file tree

Showing 17 changed files with 4,744 additions and 4,358 deletions.
diff --git a/dist/vue-color.js b/dist/vue-color.js
diff --git a/dist/vue-color.min.js b/dist/vue-color.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-color",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Color of Vue Components",
   "keywords": [
     "color",

diff --git a/src/components/Chrome.vue b/src/components/Chrome.vue
@@ -1,12 +1,12 @@
 <template>
-  <div role="ChromeColorPicker" :class="['vc-chrome', disableAlpha ? 'vc-chrome__disable-alpha' : '']">
+  <div role="application" aria-label="Chrome color picker" :class="['vc-chrome', disableAlpha ? 'vc-chrome__disable-alpha' : '']">
     <div class="vc-chrome-saturation-wrap">
       <saturation v-model="colors" @change="childChange"></saturation>
     </div>
     <div class="vc-chrome-body">
       <div class="vc-chrome-controls">
         <div class="vc-chrome-color-wrap">
-          <div class="vc-chrome-active-color" :style="{background: activeColor}"></div>
+          <div :aria-label="`current color is ${colors.hex}`" class="vc-chrome-active-color" :style="{background: activeColor}"></div>
           <checkboard v-if="!disableAlpha"></checkboard>
         </div>
 
@@ -25,7 +25,7 @@
           <!-- hex -->
           <div class="vc-chrome-field">
             <ed-in v-if="!hasAlpha" label="hex" :value="colors.hex" @change="inputChange"></ed-in>
-            <ed-in v-if="hasAlpha" label="hex" :value="colors.hex8" @change="inputChange"></ed-in>  
+            <ed-in v-if="hasAlpha" label="hex" :value="colors.hex8" @change="inputChange"></ed-in>
           </div>
         </div>
         <div class="vc-chrome-fields" v-show="fieldsIndex === 1">
@@ -48,7 +48,7 @@
           <div class="vc-chrome-field">
             <ed-in label="h" :value="hsl.h" @change="inputChange"></ed-in>
           </div>
-          <div class="vc-chrome-field"> 
+          <div class="vc-chrome-field">
             <ed-in label="s" :value="hsl.s" @change="inputChange"></ed-in>
           </div>
           <div class="vc-chrome-field">
@@ -61,17 +61,17 @@
         <!-- btn -->
         <div class="vc-chrome-toggle-btn" role="button" aria-label="Change another color definition" @click="toggleViews">
           <div class="vc-chrome-toggle-icon">
-            <svg style="width:24px; height:24px" viewBox="0 0 24 24" 
-              @mouseover="showHighlight" 
-              @mouseenter="showHighlight" 
+            <svg style="width:24px; height:24px" viewBox="0 0 24 24"
+              @mouseover="showHighlight"
+              @mouseenter="showHighlight"
               @mouseout="hideHighlight">
               <path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" />
             </svg>
           </div>
           <div class="vc-chrome-toggle-icon-highlight" v-show="highlight"></div>
         </div>
         <!-- btn -->
-      </div>      
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/Compact.vue b/src/components/Compact.vue
@@ -1,11 +1,13 @@
 <template>
-  <div role="CompactColorPicker" class="vc-compact">
-    <ul class="vc-compact-colors" role="option">
-      <li 
-        class="vc-compact-color-item"
+  <div role="application" aria-label="Compact color picker" class="vc-compact">
+    <ul class="vc-compact-colors" role="listbox">
+      <li
         v-for="c in paletteUpperCase(palette)"
+        role="option"
+        :aria-label="'color:' + c"
+        :aria-selected="c === pick"
+        class="vc-compact-color-item"
         :key="c"
-        :aria-label="'Color:' + c"
         :class="{'vc-compact-color-item--white': c === '#FFFFFF' }"
         :style="{background: c}"
         @click="handlerClick(c)"
@@ -90,7 +92,7 @@ export default {
 .vc-compact-color-item--white .vc-compact-dot {
   background: #000;
 }
-  
+
 .vc-compact-dot {
   position: absolute;
   top: 5px;

diff --git a/src/components/Grayscale.vue b/src/components/Grayscale.vue
@@ -1,10 +1,12 @@
 <template>
-  <div role="GrayscaleColorPicker" class="vc-grayscale">
-    <ul class="vc-grayscale-colors" role="option">
+  <div role="application" aria-label="Grayscale color picker" class="vc-grayscale">
+    <ul class="vc-grayscale-colors" role="listbox">
       <li
         v-for="c in paletteUpperCase(palette)"
-        :key="c"
+        role="option"
         :aria-label="'Color:' + c"
+        :aria-selected="c === pick"
+        :key="c"
         class="vc-grayscale-color-item"
         :class="{'vc-grayscale-color-item--white': c == '#FFFFFF'}"
         :style="{background: c}"

diff --git a/src/components/Material.vue b/src/components/Material.vue
@@ -1,5 +1,5 @@
 <template>
-  <div role="MaterialColorPicker" class="vc-material">
+  <div role="application" aria-label="Material color picker" class="vc-material">
     <ed-in class="vc-material-hex" label="hex" v-model="colors.hex"
       :style="{ borderColor: colors.hex }" @change="onChange"></ed-in>
 

diff --git a/src/components/Photoshop.vue b/src/components/Photoshop.vue
@@ -1,6 +1,6 @@
 <template>
-  <div role="PhotoShopColorPicker" :class="['vc-photoshop', disableFields ? 'vc-photoshop__disable-fields' : '']">
-    <div class="vc-ps-head">{{head}}</div>
+  <div role="application" aria-label="PhotoShop color picker" :class="['vc-photoshop', disableFields ? 'vc-photoshop__disable-fields' : '']">
+    <div role="heading" class="vc-ps-head">{{head}}</div>
     <div class="vc-ps-body">
       <div class="vc-ps-saturation-wrap">
         <saturation v-model="colors" @change="childChange"></saturation>
@@ -14,16 +14,16 @@
       </div>
       <div :class="['vc-ps-controls', disableFields ? 'vc-ps-controls__disable-fields' : '']">
         <div class="vc-ps-previews">
-          <div class="vc-ps-previews__label">new</div>
+          <div class="vc-ps-previews__label">{{ newLabel }}</div>
           <div class="vc-ps-previews__swatches">
-            <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 class="vc-ps-previews__pr-color" :aria-label="`New color is ${colors.hex}`" :style="{background: colors.hex}"></div>
+            <div class="vc-ps-previews__pr-color" :aria-label="`Current color is ${currentColor}`" :style="{background: currentColor}" @click="clickCurrentColor"></div>
           </div>
-          <div class="vc-ps-previews__label">current</div>
+          <div class="vc-ps-previews__label">{{ currentLabel }}</div>
         </div>
         <div class="vc-ps-actions" v-if="!disableFields">
-          <div class="vc-ps-ac-btn" role="button" aria-label="Confirm" @click="handleAccept">{{ acceptLabel }}</div>
-          <div class="vc-ps-ac-btn" role="button" aria-label="Cancel" @click="handleCancel">{{ cancelLabel }}</div>
+          <div class="vc-ps-ac-btn" role="button" :aria-label="acceptLabel" @click="handleAccept">{{ acceptLabel }}</div>
+          <div class="vc-ps-ac-btn" role="button" :aria-label="cancelLabel" @click="handleCancel">{{ cancelLabel }}</div>
 
           <div class="vc-ps-fields">
             <!-- hsla -->
@@ -81,6 +81,14 @@ export default {
     resetLabel: {
       type: String,
       default: 'Reset'
+    },
+    newLabel: {
+      type: String,
+      default: 'new'
+    },
+    currentLabel: {
+      type: String,
+      default: 'current'
     }
   },
   components: {

diff --git a/src/components/Sketch.vue b/src/components/Sketch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div role="SketchColorPicker" :class="['vc-sketch', disableAlpha ? 'vc-sketch__disable-alpha' : '']">
+  <div role="application" aria-label="Sketch color picker" :class="['vc-sketch', disableAlpha ? 'vc-sketch__disable-alpha' : '']">
     <div class="vc-sketch-saturation-wrap">
       <saturation v-model="colors" @change="childChange"></saturation>
     </div>
@@ -13,7 +13,7 @@
         </div>
       </div>
       <div class="vc-sketch-color-wrap">
-        <div :aria-label="'CurrentColor:' + activeColor" class="vc-sketch-active-color" :style="{background: activeColor}"></div>
+        <div :aria-label="`Current color is ${activeColor}`" class="vc-sketch-active-color" :style="{background: activeColor}"></div>
         <checkboard></checkboard>
       </div>
     </div>
@@ -35,7 +35,7 @@
         <ed-in label="a" :value="colors.a" :arrow-offset="0.01" :max="1" @change="inputChange"></ed-in>
       </div>
     </div>
-    <div class="vc-sketch-presets" role="group">
+    <div class="vc-sketch-presets" role="group" aria-label="A color preset, pick one to set as current color">
       <template v-for="c in presetColors">
         <div
           v-if="!isTransparent(c)"

diff --git a/src/components/Slider.vue b/src/components/Slider.vue
@@ -1,14 +1,15 @@
 <template>
-  <div role="SliderColorPicker" class="vc-slider">
+  <div role="application" aria-label="Slider color picker" class="vc-slider">
     <div class="vc-slider-hue-warp">
       <hue v-model="colors" @change="hueChange"></hue>
     </div>
     <div class="vc-slider-swatches" role="group">
       <div class="vc-slider-swatch" v-for="(offset, index) in swatches" :key="index" :data-index="index"
+        :aria-label="'color:' + colors.hex"
+        role="button"
         @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, 'vc-slider-swatch-picker--white': offset === '1'}"
           :style="{background: 'hsl(' + colors.hsl.h + ', 50%, ' + (offset * 100) + '%)'}"
         ></div>
@@ -83,7 +84,7 @@ export default {
   transform: translate(-7px, -2px);
   background-color: rgb(248, 248, 248);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
-} 
+}
 .vc-slider-swatches {
   display: flex;
   margin-top: 20px;

diff --git a/src/components/Swatches.vue b/src/components/Swatches.vue
@@ -1,9 +1,11 @@
 <template>
-  <div role="SwatchesColorPicker" class="vc-swatches" :data-pick="pick">
-    <div class="vc-swatches-box" role="group">
+  <div role="application" aria-label="Swatches color picker" class="vc-swatches" :data-pick="pick">
+    <div class="vc-swatches-box" role="listbox">
       <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' }]"
+          role="option"
           :aria-label="'Color:' + c"
+          :aria-selected="equal(c)"
           v-for="c in group" :key="c"
           :data-color="c"
           :style="{background: c}"
@@ -117,7 +119,7 @@ export default {
 .vc-swatches-pick {
   fill: rgb(255, 255, 255);
   margin-left: 8px;
-  display: block; 
+  display: block;
 }
 .vc-swatches-color--white .vc-swatches-pick {
   fill: rgb(51, 51, 51);

diff --git a/src/components/common/Alpha.vue b/src/components/common/Alpha.vue
@@ -1,5 +1,5 @@
 <template>
-  <div role="HuePanel" class="vc-alpha">
+  <div class="vc-alpha">
     <div class="vc-alpha-checkboard-wrap">
       <checkboard></checkboard>
     </div>
@@ -8,7 +8,7 @@
         @mousedown="handleMouseDown"
         @touchmove="handleChange"
         @touchstart="handleChange">
-      <div role="CurrentAlphaPointer" class="vc-alpha-pointer" :style="{left: colors.a * 100 + '%'}">
+      <div class="vc-alpha-pointer" :style="{left: colors.a * 100 + '%'}">
         <div class="vc-alpha-picker"></div>
       </div>
     </div>

diff --git a/src/components/common/EditableInput.vue b/src/components/common/EditableInput.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="vc-editable-input">
     <input
-      :aria-label="desc ? label + '(' + desc + ')' : label"
+      :aria-labelledby="labelId"
       class="vc-input__input"
       v-model="val"
       @keydown="handleKeyDown"
       @input="update"
       ref="input"
     >
-    <span :for="label" class="vc-input__label">{{label}}</span>
+    <span :for="label" class="vc-input__label" :id="labelId">{{labelSpanText}}</span>
     <span class="vc-input__desc">{{desc}}</span>
   </div>
 </template>
@@ -18,6 +18,7 @@ export default {
   name: 'editableInput',
   props: {
     label: String,
+    labelText: String,
     desc: String,
     value: [String, Number],
     max: Number,
@@ -40,6 +41,12 @@ export default {
           return v
         }
       }
+    },
+    labelId () {
+      return `input__label__${this.label}__${Math.random().toString().slice(2, 5)}`
+    },
+    labelSpanText () {
+      return this.labelText || this.label
     }
   },
   methods: {

diff --git a/src/components/common/Hue.vue b/src/components/common/Hue.vue
@@ -1,12 +1,17 @@
 <template>
-  <div role="HuePanel" :class="['vc-hue', directionClass]">
-    <div class="vc-hue-container" ref="container"
+  <div :class="['vc-hue', directionClass]">
+    <div class="vc-hue-container"
+      role="slider"
+      :aria-valuenow="colors.hsl.h"
+      aria-valuemin="0"
+      aria-valuemax="360"
+      ref="container"
       @mousedown="handleMouseDown"
       @touchmove="handleChange"
       @touchstart="handleChange">
-      <div role="CurrentHuePointer" class="vc-hue-pointer" :style="{top: pointerTop, left: pointerLeft}">
+      <div class="vc-hue-pointer" :style="{top: pointerTop, left: pointerLeft}" role="presentation">
         <div class="vc-hue-picker"></div>
-      </div>  
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/common/Saturation.vue b/src/components/common/Saturation.vue
@@ -1,13 +1,13 @@
 <template>
-  <div role="SaturationPanel" class="vc-saturation"
+  <div 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 role="CurrentSaturationPointer" class="vc-saturation-pointer" :style="{top: pointerTop, left: pointerLeft}">
+    <div class="vc-saturation-pointer" :style="{top: pointerTop, left: pointerLeft}">
       <div class="vc-saturation-circle"></div>
     </div>
   </div>

diff --git a/src/index.js b/src/index.js
@@ -14,7 +14,7 @@ import Saturation from './components/common/Saturation.vue'
 import ColorMixin from './mixin/color.js'
 
 const VueColor = {
-  version: '2.6.0',
+  version: '2.7.0',
   Compact,
   Grayscale,
   Material,