@everchron/ec-shards 6.2.2 → 7.0.0

package/src/components/popover-list-item/popover-list-item.vue

@@ -1,20 +1,20 @@
 <template>
   <li>
-    <div v-if="type === 'checkbox'" class="ecs-popover-list-item control no-hover">
+    <div v-if="type === 'checkbox'" class="ecs-popover-list-item control no-hover" role="menuitem" tabindex="-1">
       <ecs-checkbox @input="$emit('input', $event)" :disabled="disabled" :value="value" :value-false="valueFalse" :value-true="valueTrue" :indeterminate="indeterminate">
         <slot></slot>
       </ecs-checkbox>
       <span v-if="suffix" class="after">{{suffix}}</span>
     </div>
 
-    <div v-else-if="type === 'radiobutton'" class="ecs-popover-list-item control no-hover">
+    <div v-else-if="type === 'radiobutton'" class="ecs-popover-list-item control no-hover" role="menuitem" tabindex="-1">
       <ecs-radiobutton @change="$emit('change', $event)" :disabled="disabled" :checked="value">
         <slot></slot>
       </ecs-radiobutton>
       <span v-if="suffix" class="after">{{suffix}}</span>
     </div>
 
-    <div v-else-if="type === 'switch'" class="ecs-popover-list-item control no-hover">
+    <div v-else-if="type === 'switch'" class="ecs-popover-list-item control no-hover" role="menuitem" tabindex="-1">
       <ecs-switch @input="$emit('input', $event)" :value="value" :value-false="valueFalse" :value-true="valueTrue" size="sml-toggle" :disabled="disabled">
         <slot></slot>
         <span v-if="help" class="help">{{help}}</span>
@@ -22,21 +22,23 @@
       <span v-if="suffix" class="after">{{suffix}}</span>
     </div>
 
-    <div v-else-if="type === 'sort'" @click="$emit('click', $event)" class="ecs-popover-list-item control no-hover">
+    <div v-else-if="type === 'sort'" @click="$emit('click', $event)" class="ecs-popover-list-item control no-hover" role="menuitem" tabindex="0">
       <ecs-sortbutton :sort="sort" :disabled="disabled">
         <slot></slot>
       </ecs-sortbutton>
       <span v-if="suffix" class="after">{{suffix}}</span>
+      <ecs-focus-ring :inset="0" />
     </div>
 
-    <a v-else-if="type === 'link'" @click="$emit('click', $event)" class="ecs-popover-list-item"
+    <a v-else-if="type === 'link'" @click="$emit('click', $event)" class="ecs-popover-list-item"  tabindex="0"
             :class="[
                     danger ? `danger` : '',
                     subtle ? `subtle` : '',
                     disabled ? `disabled` : '',
                     noHover ? `no-hover` : '',
                     selected ? `selected` : '']"
-            :href="href">
+            :href="href"
+            role="menuitem">
 
         <ecs-icon v-if="icon" :type="icon" size="24" />
         <ecs-file-icon v-if="fileIcon" :type="fileIcon" />
@@ -56,6 +58,7 @@
         </span>
         <span v-if="suffix" class="after">{{suffix}}</span>
         <ecs-icon v-if="hoverIcon" :type="hoverIcon" class="hover-icon" />
+        <ecs-focus-ring :inset="0" />
     </a>
 
     <button v-else class="ecs-popover-list-item"
@@ -65,7 +68,9 @@
                     disabled ? `disabled` : '',
                     noHover || preventHover ? `no-hover` : '',
                     selected ? `selected` : '']"
-            @click="$emit('click', $event)">
+            @click="$emit('click', $event)"
+            role="menuitem"
+            tabindex="0">
 
         <ecs-icon v-if="icon" :type="icon" size="24" />
         <ecs-file-icon v-if="fileIcon" :type="fileIcon" />
@@ -85,6 +90,7 @@
         </span>
         <span v-if="suffix" class="after">{{suffix}}</span>
         <ecs-icon v-if="hoverIcon" :type="hoverIcon" size="24" class="hover-icon" />
+        <ecs-focus-ring :inset="0" />
     </button>
   </li>
 </template>
@@ -97,9 +103,10 @@
   import EcsIcon        from '../icon/icon'
   import EcsFileIcon    from '../file-icon/file-icon'
   import EcsButton      from '../button/button'
+  import EcsFocusRing   from '../mixins/focus-ring'
 
   export default {
-    components: { EcsCheckbox, EcsRadiobutton, EcsSwitch, EcsSortbutton, EcsIcon, EcsFileIcon, EcsButton },
+    components: { EcsCheckbox, EcsRadiobutton, EcsSwitch, EcsSortbutton, EcsIcon, EcsFileIcon, EcsButton, EcsFocusRing },
 
     props: {
       /** Determines the type of popover list item.*/
@@ -269,6 +276,18 @@
     white-space: nowrap;
     cursor: pointer;
 
+    &:focus{
+      outline: none;
+    }
+
+    &:focus-visible{
+      outline: none;
+
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
     &:hover,
     &.active{
       background: rgba($color-blue-8, .08);

package/src/components/progress/progress.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="ecs-progress">
+  <div
+    class="ecs-progress"
+    role="progressbar"
+    aria-label="Progress"
+    :aria-valuenow="100 * (value / computedMax)"
+    aria-valuemin="0"
+    :aria-valuemax="computedMax">
     <div
       class="ecs-progress-bar"
       :class="

package/src/components/quicklink/quicklink.vue

@@ -4,18 +4,20 @@
     active ? 'active' : '',
     disabled ? 'disabled' : ''
   ]">
-    <label v-if="type === 'icon'" @click="$emit('click', $event)">
+    <label v-if="type === 'icon'" @click="$emit('click', $event)" tabindex="0" role="button">
       <ecs-icon :type="icon" />
       <span class="filter-description">{{label}}</span>
       <small v-if="count" class="filter-count">{{count}}</small>
+      <ecs-focus-ring />
     </label>
 
-    <div v-else-if="type === 'favorability'" class="ecs-form-check" @click="$emit('click', $event)">
+    <div v-else-if="type === 'favorability'" class="ecs-form-check" @click="$emit('click', $event)" tabindex="0" role="button">
       <ecs-rating-favorability :type="favorabilityType" :rating="rating" :label="false" :disabled="disabled" />
       <label class="ml-3">
         <span class="static-label">{{label}}</span>
       </label>
       <small v-if="count" class="filter-count">{{count}}</small>
+      <ecs-focus-ring />
     </div>
 
     <ecs-checkbox v-else @input="$emit('input', $event)" :value="value" :value-false="valueFalse" :value-true="valueTrue" :disabled="disabled">
@@ -42,9 +44,10 @@
   import EcsRatingFavorability from '../rating-favorability/rating-favorability'
   import EcsSwitch from '../switch/switch'
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
-    components: { EcsCheckbox, EcsRatingStarRead, EcsRatingFavorability, EcsSwitch, EcsIcon },
+    components: { EcsCheckbox, EcsRatingStarRead, EcsRatingFavorability, EcsSwitch, EcsIcon, EcsFocusRing },
 
     props: {
       label: {
@@ -176,28 +179,36 @@
       margin-left: auto;
     }
 
-    .ecs-form-select{
-      margin-left: auto;
-    }
-
-    &.has-checkbox{
+    &.has-checkbox > .ecs-form-check{
       padding: 0 10px;
+      position: relative;
+      height: 32px;
+
+      &:focus-visible{
+        z-index: 1;
+        outline: none;
+        
+        .ecs-focus-ring{
+          display: block;
+        }
+      }
     }
 
-    &.has-icon{
+    &.has-icon > label{
       padding: 0 10px 0 4px;
-
-      [type="checkbox"],
-      [type="radio"]{
-        position: absolute;
-        opacity: 0;
+      position: relative;
+      height: 32px;
+
+      &:focus-visible{
+        z-index: 1;
+        outline: none;
+        
+        .ecs-focus-ring{
+          display: block;
+        }
       }
     }
 
-    &.has-select{
-      padding-right: 4px;
-    }
-
     &.active{
       background: $color-blue-2;
 

package/src/components/radiobutton/radiobutton.vue

@@ -1,7 +1,6 @@
 <template>
   <ecs-form-check :class="[
     inline ? `ecs-form-check-inline` : '',
-    disabled ? `disabled` : '',
     $slots.default ? '' : 'stand-alone']">
 
     <input
@@ -16,7 +15,8 @@
       :disabled="disabled"
       v-model="computedLocalChecked"
       @change="handleChange">
-    <label
+
+      <label
       class="ecs-form-check-label"
       :for="id">
 

package/src/components/rating-favorability/rating-favorability.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="ecs-favorability" :class="[typeClass, disabled ? 'disabled' : '']" @click="$emit('click', $event)">
+  <div @click="$emit('click', $event)"
+    class="ecs-favorability"
+    :class="[typeClass, disabled ? 'disabled' : '']"
+    :aria-busy="loading">
+    
     <div class="ecs-favorability-button" :class="[css, loading ? 'loading' : '']" :title="labelText">
       <ecs-icon :type="iconType" />
     </div>

package/src/components/rating-star-read/rating-star-read.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-rating-read" :class="[sizeClass]">
+  <div class="ecs-rating-read" :class="[sizeClass]" :aria-busy="loading" :aria-label="rating + ' stars'">
     <div v-if="!loading" class="ecs-stars-read" :data-maximum="maximum" :data-rating="rating"></div>
     <ecs-skeleton-loader v-else type="single" :line-height="3" :width="100" />
   </div>

package/src/components/select/select.vue

@@ -149,6 +149,11 @@ export default {
     }
   }
 
+  &:focus-within{
+    border-color: rgba($color-blue-8, .5);
+    box-shadow: 0 0 0 2px rgba($color-blue-8, .15);
+  }
+
   &.disabled{
     opacity: .5;
   }
@@ -173,11 +178,11 @@ export default {
       outline: none;
     }
 
-    &:required:invalid {
+    &:required:invalid{
       color: #858f9e;
     }
 
-    option[value=""][disabled] {
+    option[value=""][disabled]{
       display: none;
     }
 
@@ -196,6 +201,11 @@ export default {
       border: 1px solid $color-gray-4;
       box-shadow: none;
     }
+
+    &:focus-within{
+      border: 1px solid $color-gray-6;
+      box-shadow: 0 0 0 2px rgba($color-gray-8, .15);
+    }
   }
 
   &-invisible{

package/src/components/select-text/select-text.vue

@@ -13,14 +13,16 @@
             >
       <slot></slot>
     </select>
+    <ecs-focus-ring :inset="size == 'xsml' ? -2 : -4" />
   </div>
 </template>
 
 <script>
 import EcsIcon from '../icon/icon'
+import EcsFocusRing from '../mixins/focus-ring'
 
 export default {
-  components: { EcsIcon },
+  components: { EcsIcon, EcsFocusRing },
 
   props: {
     /** Determines the size of the select control. */
@@ -155,7 +157,6 @@ export default {
 @import "../mixins/svg-uri";
 
 .ecs-form-select-text{
-  overflow: hidden;
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -183,6 +184,10 @@ export default {
 
     &:focus{
       outline: none;
+
+      + .ecs-focus-ring{
+        display: block;
+      }
     }
 
     option[value=""][disabled] {

package/src/components/select-tile/select-tile.vue

@@ -1,16 +1,31 @@
 <template>
-  <div @click="$emit('click', $event)" class="ecs-select-tile"
-      :class="[selected ? 'ecs-select-tile-selected' : '', disabled ? 'ecs-select-tile-disabled' : '']">
+  <div
+    @click="$emit('click', $event)"
+    @keydown.space.prevent="$emit('click', $event)"
+    @keydown.enter.prevent="$emit('click', $event)"
+    class="ecs-select-tile"
+    :class="[selected ? 'ecs-select-tile-selected' : '', disabled ? 'ecs-select-tile-disabled' : '']"
+    role="checkbox"
+    :aria-checked="selected ? 'true' : 'false'"
+    :tabindex="disabled ? '-1' : '0'"
+    >
 
     <div class="select-check" />
     <div v-if="illustration" class="illustration" :class="illustration" />
     <div v-if="label" class="label">{{ label }}</div>
     <div v-if="helpText" class="help">{{ helpText }}</div>
+    <ecs-focus-ring :inset="-6" :radius="12" />
   </div>
 </template>
 
 <script>
+  import EcsFocusRing from '../mixins/focus-ring'
+
   export default {
+    components: {
+      EcsFocusRing
+    },
+
     props: {
       /** The main label for the tile. */
       label: {
@@ -68,6 +83,15 @@
   transition: .2s;
   position: relative;
 
+  &:focus-visible{
+    z-index: 1;
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:hover{
     box-shadow: 0px 0px 0px 1px rgba(71, 75, 96, 0.05), 0px 2px 4px rgba(71, 75, 96, 0.15);
     transform: translateY(-4px);

package/src/components/separator/separator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-separator" :class="classes" :style="{margin: marginStyles, width: width, height: height}" />
+  <div class="ecs-separator" :class="classes" :style="{margin: marginStyles, width: width, height: height}" role="separator" />
 </template>
 
 <script>

package/src/components/sequence-map/sequence-map.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-sequence-map">
+  <div class="ecs-sequence-map" role="navigation" aria-label="Steps">
     <slot></slot>
   </div>
 </template>

package/src/components/sequence-map-button/sequence-map-button.vue

@@ -1,21 +1,24 @@
 <template>
   <button @click="$emit('click', $event)"
           class="ecs-sequence-map-button"
-          :class="[active ? 'active' : '', loading ? 'loading' : '', disabled ? 'disabled' : '', completed ? 'completed' : '']">
+          :class="[active ? 'active' : '', loading ? 'loading' : '', disabled ? 'disabled' : '', completed ? 'completed' : '']"
+          :aria-busy="loading">
     <span class="count">
       {{ step }}
       <ecs-icon v-if="loading" type="loading" class="loading" size="34" />
     </span>
     <slot></slot>
+    <ecs-focus-ring :inset="4" />
     <div class="step-indicator" />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
-    components: { EcsIcon },
+    components: { EcsIcon, EcsFocusRing },
 
     props: {
       /** Index of the step. */
@@ -61,6 +64,15 @@
   transition: .2s;
   position: relative;
 
+  &:focus-visible{
+    z-index: 1;
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   .count{
     width: 18px;
     height: 18px;

package/src/components/sidebar-footer/sidebar-footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-sidebar-footer" :class="[$slots.extension ? 'has-extension' : '']">
+  <footer class="ecs-sidebar-footer" :class="[$slots.extension ? 'has-extension' : '']">
     <!-- @slot Slot that can contain an EcsAlert, which will appear above the sidebar footer. -->
     <slot name="alert"></slot>
     <div v-if="$slots.extension" class="ecs-sidebar-footer-extension" :class="[condensed ? 'condensed' : '']">
@@ -9,7 +9,7 @@
     <div class="ecs-sidebar-footer-inner" :class="[condensed ? 'ecs-sidebar-footer-inner-condensed' : '']">
       <slot></slot>
     </div>
-  </div>
+  </footer>
 </template>
 
 <script>

package/src/components/sidebar-header/sidebar-header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-sidebar-header">
+  <header class="ecs-sidebar-header">
     <div class="ecs-sidebar-header-row">
       <div class="ecs-sidebar-header-title">
         <slot></slot>
@@ -21,7 +21,7 @@
         <slot name="tertiaryheader"></slot>
       </div>
     </transition>
-  </div>
+  </header>
 </template>
 
 <script>

package/src/components/sortbutton/sortbutton.vue

@@ -1,21 +1,24 @@
 <template>
-  <ecs-form-check class="ecs-sort" :class="[
-    sortClass,
-    inline ? `ecs-form-check-inline` : '',
-    disabled ? `disabled` : '']">
+  <ecs-form-check
+    class="ecs-sort"
+    :class="[
+      sortClass,
+      inline ? `ecs-form-check-inline` : '',]">
 
     <span class="ecs-sort-box"></span>
-    <label class="ecs-form-check-label" @click="$emit('click', $event)">
+    <label class="ecs-form-check-label" @click="$emit('click', $event)" role="button" tabindex="0">
       <slot />
+      <ecs-focus-ring />
     </label>
   </ecs-form-check>
 </template>
 
 <script>
   import EcsFormCheck from '../form-check/form-check'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
-    components: { EcsFormCheck },
+    components: { EcsFormCheck, EcsFocusRing },
 
     props: {
       /** Disables the sort button. */
@@ -26,7 +29,7 @@
       /** Determines the current state of the button. */
       sort: {
         type: String,
-        validator: v => ['ascending', 'descending',  null].includes(v),
+        validator: v => ['ascending', 'descending', null].includes(v),
         default: null
       },
       /** Renders the sort button as an inline element. */
@@ -55,6 +58,7 @@
     display: inline-block;
     position: absolute;
     left: 0;
+    top: 1px;
     width: 18px;
     height: 18px;
     background: white;
@@ -95,4 +99,15 @@
     opacity: .6;
   }
 }
+
+.ecs-form-check-label{
+  &:focus-visible{
+    z-index: 1;
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+}
 </style>

package/src/components/sticker/sticker.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg class="ecs-sticker" v-if="isValidType" :class="spinning ? 'ecs-spinner' : ''"
+  <svg class="ecs-sticker" v-if="isValidType" :class="spinning ? 'ecs-spinner' : ''" :aria-busy="spinning"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 16 16"
     width="16px"

package/src/components/swatches-picker/swatches-picker.vue

@@ -1,9 +1,19 @@
 <template>
-  <div class="ecs-swatches" :class="sizeClass">
+  <div
+    class="ecs-swatches"
+    :class="sizeClass"
+    role="radiogroup">
+
     <div
       v-for="item in swatches" :key="item.id"
-      @click="selectedColor = item.hex"
+      @click="handleItemClick(item)"
+      @keydown.space.prevent="handleItemClick(item)"
+      @keydown.enter.prevent="handleItemClick(item)"
+      role="radio"
+      tabindex="0"
       :title="item.title"
+      :aria-label="item.title"
+      :aria-checked="selectedColor == item.hex ? 'true' : 'false'"
       class="ecs-swatches-color"
       :style="{backgroundColor: item.hex, color: item.hex}"
       :class="selectedColor == item.hex ? 'active' : ''">
@@ -50,6 +60,10 @@
       emitSelected(){
         /** Returns the selected color value as HEX. */
         this.$emit('input', this.selectedColor)
+      },
+
+      handleItemClick(item) {
+        this.selectedColor = item.hex;
       }
     },
 
@@ -129,12 +143,23 @@
       transform: scale(1.1);
     }
 
+    &:focus-visible{
+      &:before{
+        opacity: .8;
+        transform: scale(1);
+      }
+    }
+
     &.active{
       transform: scale(1.1);
 
       &:before{
         opacity: 1;
-         transform: scale(1);
+        transform: scale(1);
+      }
+
+      &:focus-visible:before{
+            transform: scale(1.2);
       }
 
       &:after{

package/src/components/switch/switch.vue

@@ -11,7 +11,7 @@
       <input
         type="checkbox"
         autocomplete="off"
-        :id="id"
+        :id="switchId"
         :name="name"
         :required="required"
         :disabled="disabled"
@@ -19,16 +19,23 @@
         @change="handleClick">
       <div class="ecs-slide-switch">
         <div class="indeterminate" />
+        <ecs-focus-ring :radius="20" />
       </div>
     </label>
-    <label v-if="hasDefaultSlot" :for="id">
+    <label v-if="hasDefaultSlot" :for="switchId">
       <slot></slot>
     </label>
   </div>
 </template>
 
 <script>
+  import EcsFocusRing from '../mixins/focus-ring'
+  import { uniqueIdMixin } from '../mixins/unique-id'
+
   export default {
+    components: { EcsFocusRing },
+    mixins: [uniqueIdMixin],
+
     props: {
       /** Sets the name attribute. */
       name: {
@@ -78,16 +85,12 @@
 
     data () {
       return {
-        id: null,
+        switchId: '',
         checked: !!this.value,
         oldValue: this.value
       }
     },
 
-    mounted () {
-      this.id = this._uid
-    },
-
     computed: {
       hasDefaultSlot () {
         return !!this.$slots.default
@@ -145,6 +148,10 @@
         this.checked = !this.checked
         this.$emit('input', this.checked ? this.valueWhenTrue : this.valueWhenFalse)
       }
+    },
+
+    created() {
+      this.switchId = this.generateUniqueId()
     }
   }
 </script>
@@ -155,6 +162,7 @@
 
 .ecs-switch{
   margin: 5px 0;
+  position: relative;
 
   &-wrapper{
     display: flex;
@@ -162,7 +170,15 @@
   }
 
   input[type=checkbox] {
-    display:none;
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+
+    &:focus-visible{
+      + .ecs-slide-switch .ecs-focus-ring{
+        display: block;
+      }
+    }
   }
 
   .indeterminate{