@everchron/ec-shards 6.2.2 → 7.0.0

package/src/components/context-menu/context-menu.vue

@@ -1,10 +1,25 @@
 <template>
-  <div class="ecs-context-menu" :class="opened ? ' opened': ''" :id="elementId" :style="[postionStyles]" v-click-outside="onClickOutside">
-    <ul>
+  <div 
+    class="ecs-context-menu"
+    :class="opened ? ' opened': ''"
+    :id="elementId"
+    :style="[postionStyles]"
+    v-click-outside="onClickOutside"
+    >
+    <ul 
+      role="menu"
+      aria-orientation="vertical"
+      tabindex="0"
+      @keydown.up.prevent="focusPrevious"
+      @keydown.down.prevent="focusNext"
+      ref="menu" id="my-menu">
       <li
         v-for="(option, index) in options"
         :key="index"
         @click.stop="optionClicked(option)"
+        :role="option.type === 'divider' ? 'separator' : 'menuitem'"
+        :tabindex="option.type === 'divider' || option.disabled ? '-1' : '0'"
+        :aria-disabled="option.disabled"
         :class="[
           option.type === 'divider' ? 'ecs-context-menu-divider' : 'ecs-context-menu-item',
           option.type === 'danger' ? 'danger' : '',
@@ -13,6 +28,7 @@
       >
         <ecs-icon v-if="option.icon" :type="option.icon" size="20" />
         <span v-if="option.type != 'divider'">{{ option.name}}</span>
+        <ecs-focus-ring :danger="option.type == 'danger'" />
       </li>
     </ul>
   </div>
@@ -23,9 +39,10 @@ import Vue from "vue";
 import vClickOutside from "v-click-outside"
 Vue.use(vClickOutside)
 import EcsIcon from '../icon/icon'
+import EcsFocusRing from '../mixins/focus-ring'
 
 export default {
-  components: { EcsIcon },
+  components: { EcsIcon, EcsFocusRing },
 
   props: {
     /** Unique String that acts as the id for the menu. */
@@ -97,6 +114,10 @@ export default {
         this.top = event.pageY - 2
       }
       this.opened = true
+
+      this.$nextTick(() => {
+        this.$refs.menu.focus();
+      });
     },
 
     hideContextMenu() {
@@ -126,11 +147,62 @@ export default {
       if (event.keyCode === 27) {
         this.hideContextMenu()
       }
+    },
+
+    // Focus the first menu item when the context menu opens
+    focusFirst() {
+      this.$refs.menu.children[0].focus();
+    },
+    // Focus the last menu item when the user presses the up arrow key on the first menu item
+    focusLast() {
+      const items = this.$refs.menu.children;
+      items[items.length - 1].focus();
+    },
+    // Focus the previous menu item when the user presses the up arrow key
+    focusPrevious(event) {
+      const items = this.$refs.menu.children;
+      const index = Array.prototype.indexOf.call(items, event.target);
+      if (index > 0) {
+        let prevIndex = index - 1;
+        while (prevIndex >= 0 && items[prevIndex].getAttribute('tabindex') === '-1') {
+          prevIndex--;
+        }
+        if (prevIndex >= 0) {
+          items[prevIndex].focus();
+        } else {
+          this.focusLast();
+        }
+      } else {
+        this.focusLast();
+      }
+    },
+
+    focusNext(event) {
+      const items = this.$refs.menu.children;
+      let index = Array.prototype.indexOf.call(items, event.target);
+
+      while (index < items.length - 1) {
+        index++;
+
+        if (items[index].getAttribute('tabindex') !== '-1') {
+          items[index].focus();
+          return;
+        }
+      }
+      this.focusFirst();
     }
   },
 
   mounted() {
     document.body.addEventListener("keyup", this.onEscKeyRelease)
+
+    this.$refs.menu.addEventListener("keydown", event => {
+      // Check if the Tab key was pressed
+      if (event.keyCode === 9) {
+        event.preventDefault();
+        this.focusFirst();
+      }
+    });
   },
 
   beforeDestroy() {
@@ -172,13 +244,23 @@ export default {
     line-height: $type-scale-3-line-height;
     color: $color-gray-15;
     cursor: pointer;
+    position: relative;
+
+    &:focus-visible{
+      z-index: 1;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
 
     .icon{
       color: $color-gray-8;
     }
 
     &:not(.disabled){
-      &.danger:hover{
+      &.danger:hover,
+      &.danger:focus{
         background: $color-red-1;
 
         .icon{
@@ -186,7 +268,8 @@ export default {
         }
       }
 
-      &:hover{
+      &:hover,
+      &:focus{
         background: $color-blue-1;
 
         .icon{

package/src/components/data-card/data-card.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="ecs-data-card" @click="$emit('click')"
-      :class="[
-                $slots.meta ? 'ecs-data-card-sml' : '',
-                $slots.actions ? 'ecs-data-card-hover' : '',
-                hover ? 'ecs-data-card-hover' : '',
-                active ? 'active' : '',
-                shadow ? 'shadow' : '',
-                isExpanded ? 'expanded' : '',
-                loading ? 'loading' : ''
-              ]">
+  <div @click="$emit('click')"
+    class="ecs-data-card"
+    role="listitem"
+    :aria-busy="loading"
+    :tabindex="hover ? '0' : '-1'"
+    :class="[
+              $slots.meta ? 'ecs-data-card-sml' : '',
+              $slots.actions ? 'ecs-data-card-hover' : '',
+              hover ? 'ecs-data-card-hover' : '',
+              active ? 'active' : '',
+              shadow ? 'shadow' : '',
+              isExpanded ? 'expanded' : '',
+              loading ? 'loading' : ''
+            ]">
 
     <div v-if="control && $slots.control" class="control">
       <!-- @slot Slot for adding a control, such as a checkbox or radiobutton. -->
@@ -29,7 +33,18 @@
             <!-- @slot Slot for adding action buttons. -->
             <slot name="actions"></slot>
           </div>
-          <ecs-button-table @click="isExpanded = !isExpanded" v-if="expandable" pale chevron size="sml" :active="isExpanded" :icon="expandIcon" :label="expandLabel" class="expand-button" />
+          <ecs-button-table
+            @click="isExpanded = !isExpanded"
+            v-if="expandable"
+            :aria-controls="expandId"
+            :aria-expanded="isExpanded ? 'true' : 'false'"
+            pale
+            chevron
+            size="sml"
+            :active="isExpanded"
+            :icon="expandIcon"
+            :label="expandLabel"
+            class="expand-button" />
         </div>
       </div>
       <div v-if="$slots.meta" class="ecs-data-card-row">
@@ -39,13 +54,19 @@
           <ecs-skeleton-loader v-if="loading" type="single" :width="skeletonWidth(15, 30)" />
         </div>
       </div>
-      <div v-if="$slots.expand" v-show="isExpanded" class="ecs-data-card-expand">
+      <div
+        v-if="$slots.expand"
+        v-show="isExpanded"
+        :id="expandId"
+        :aria-hidden="isExpanded ? 'false' : 'true'"
+        class="ecs-data-card-expand">
         <div class="ecs-data-card-expand-inner">
           <!-- @slot Slot for expandable content. -->
           <slot name="expand"></slot>
         </div>
       </div>
     </div>
+    <ecs-focus-ring v-if="hover" :inset="0" :radius="0" />
   </div>
 </template>
 
@@ -53,9 +74,12 @@
   import EcsIcon from '../icon/icon'
   import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
   import EcsButtonTable from '../button-table/button-table'
+  import EcsFocusRing from '../mixins/focus-ring'
+  import { uniqueIdMixin } from '../mixins/unique-id'
 
   export default {
-    components: { EcsIcon, EcsSkeletonLoader, EcsButtonTable },
+    components: { EcsIcon, EcsSkeletonLoader, EcsButtonTable, EcsFocusRing },
+    mixins: [uniqueIdMixin],
 
     props: {
       /** If passed, an icon will be displayed in the data card. The icon prop must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
@@ -118,7 +142,8 @@
 
     data () {
       return {
-        isExpanded: this.expanded
+        isExpanded: this.expanded,
+        expandId: ''
       }
     },
 
@@ -126,6 +151,10 @@
       skeletonWidth : function(min, max){
         return Math.floor(Math.random() * (max - min + 1) + min)
       }
+    },
+
+    created(){
+      this.expandId = this.generateUniqueId()
     }
   }
 </script>
@@ -144,6 +173,15 @@
   min-height: 46px;
   user-select: none;
 
+  &:focus-visible{
+    z-index: 1;
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:before,
   &:after{
     content: "";

package/src/components/data-card-list/data-card-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-data-card-list">
+  <div class="ecs-data-card-list" role="list">
     <slot></slot>
   </div>
 </template>

package/src/components/data-grid/data-grid-cell.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-data-grid-cell" :style="[fixedStyles]" :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']">
+  <div class="ecs-data-grid-cell" :style="[fixedStyles]" :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']" role="cell">
     <div v-if="fixedRight" class="shadow" :class="fixedRight ? 'left' : ''" />
     <div class="ecs-data-grid-cell-inner" :style="[widthStyles, paddingStyles]" :data-column="computedId" :data-test="computedId">
       <div v-if="firstNonStaticCell" class="first-cell-spacer" />

package/src/components/data-grid/data-grid-group.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="show" class="ecs-data-grid-group">
+  <div v-show="show" class="ecs-data-grid-group" role="tabpanel" :aria-labeled-by="ariaLabeledBy">
     <template v-if="show">
       <slot></slot>
     </template>
@@ -13,6 +13,11 @@
       show: {
         type: Boolean,
         default: false
+      },
+      /** Sets the aria-labeled-by attribute. Should match the ID of the tab button which controls this tab panel. */
+      ariaLabeledBy: {
+        type: String,
+        required: true
       }
     }
   }

package/src/components/data-grid/data-grid-head-cell.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="ecs-data-grid-head-cell" :style="[fixedStyles]" :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']">
+  <div
+    class="ecs-data-grid-head-cell"
+    :style="[fixedStyles]"
+    :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']"
+    role="columnheader"
+    :aria-sort="ariaSort"
+    :aria-label="icon ? name : false">
+
     <div v-if="fixedRight" class="shadow" :class="fixedRight ? 'left' : ''" />
     <div ref="resizer" class="ecs-data-grid-head-cell-inner" :style="[widthStyles, paddingStyles, resizeStyles]" :class="resizable ? 'resizable' : ''" :data-column="computedId" :data-headname="beingResizedName" :data-test="computedId">
       <div v-if="firstNonStaticCell" class="first-cell-spacer" />
@@ -17,6 +24,7 @@
           <path d="M3.99023 11.802L6.76923 14.722L9.54823 11.802" :stroke="sorting == 'desc' ? '#157EFB' : '#B9BCC2'" :stroke-width="sorting == 'desc' ? '1.5' : '1'" :opacity="sorting == 'desc' || sorting == 'none' ? '1' : '0.5'" stroke-linecap="round" stroke-linejoin="round"/>
           <path d="M3.99023 8.722L6.76923 5.802L9.54823 8.722" :stroke="sorting == 'asc' ? '#157EFB' : '#B9BCC2'" :stroke-width="sorting == 'asc' ? '1.5' : '1'" :opacity="sorting == 'asc' || sorting == 'none' ? '1' : '0.5'" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
+        <ecs-focus-ring />
       </button>
     </div>
     <div v-if="fixedLeftLast" class="shadow" :class="fixedLeftLast ? 'right' : ''" />
@@ -26,10 +34,13 @@
 <script>
   import EcsIcon from '../icon/icon'
   import EcsSelect from '../select/select'
+  import EcsFocusRing from '../mixins/focus-ring'
   
   export default {
     components: {
-      EcsIcon, EcsSelect
+      EcsIcon,
+      EcsSelect,
+      EcsFocusRing
     },
 
     props: {
@@ -179,6 +190,15 @@
 
       beingResizedName(){
         return this.beingResized ? this.uniformName + '-noresize' : this.uniformName
+      },
+
+      ariaSort(){
+        switch (this.sorting) {
+          case 'asc':
+            return 'ascending';
+          case 'desc':
+            return 'descending';
+        }
       }
     },
 
@@ -341,7 +361,17 @@
   background: none;
   padding: 0 1px;
   height: 24px;
+  position: relative;
   cursor: pointer;
+
+  &:focus-visible{
+    z-index: 1;
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
 }
 
 .shadow{

package/src/components/data-grid/data-grid-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-data-grid-row" :class="state" ref="grid_row">
+  <div class="ecs-data-grid-row" :class="state" ref="grid_row" role="row">
     <div v-if="state == 'droppable'" @click="handleDropzoneClick" class="ecs-data-grid-row-drop-zone" />
 
     <!-- @slot All of the row's cells go here. There should **never** be any other child component other than EcsDataGridCell be used. -->

package/src/components/data-grid/data-grid.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-on:scroll="tableScroll" class="ecs-data-grid scrollbar" :class="$slots.empty ? 'empty' : ''" ref="dataGridScroller">
-    <div class="ecs-data-grid-head" :class="sidebarOverlay ? 'sidebar-space' : ''">
+  <div v-on:scroll="tableScroll" class="ecs-data-grid scrollbar" :class="$slots.empty  ? 'empty' : ''" ref="dataGridScroller" role="table">
+    <div class="ecs-data-grid-head" :class="sidebarOverlay ? 'sidebar-space' : ''" role="row">
       <!-- @slot Slot for the table head row cells. -->
       <slot name="head"></slot>
     </div>

package/src/components/data-list/data-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-data-list">
+  <div class="ecs-data-list" role="list">
     <slot></slot>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="ecs-data-list-item"
+    <div class="ecs-data-list-item" role="listitem"
         :class="[
                   small ? 'ecs-data-list-item-sml' : '',
                   full ? 'ecs-data-list-item-full' : '',
@@ -14,21 +14,33 @@
           v-if="$slots.collapse"
           class="ecs-data-list-expand-button"
           :active="isVisible"
+          :aria-controls="expandId"
+          :aria-expanded="isVisible ? 'true' : 'false'"
           @click="toggleCollapse" />
       </div>
       <div class="ecs-data-list-data"
-          :class="[
-                    escape ? 'ecs-data-list-data-escape' : '',
-                    error ? 'ecs-data-list-data-error' : '',
-                    typeClass
-                  ]">
+        :aria-busy="loading"
+        :class="[
+                  escape ? 'ecs-data-list-data-escape' : '',
+                  error ? 'ecs-data-list-data-error' : '',
+                  typeClass
+                ]">
         <slot v-if="!loading"></slot>
         <ecs-skeleton-loader v-else type="single" :width="skeletonWidth(25, 70)" />
-        <div v-if="progress" class="progress" :style="{ width: progress + '%' }"></div>
+        <div v-if="progress"
+          class="progress"
+          role="progressbar"
+          :style="{ width: progress + '%' }"
+          :aria-valuenow="progress">
+        </div>
       </div>
     </div>
 
-    <div v-if="$slots.collapse" :class="isVisible ? 'collapse-show' : 'collapse-hide'">
+    <div v-if="$slots.collapse"
+      :class="isVisible ? 'collapse-show' : 'collapse-hide'"
+      role="list"
+      :id="expandId"
+      :aria-hidden="isVisible ? 'false' : 'true'">
       <!-- @slot Slot for expandable content. -->
       <slot name="collapse"></slot>
     </div>
@@ -38,9 +50,11 @@
 <script>
   import EcsButtonMore from '../button-more/button-more'
   import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+  import { uniqueIdMixin } from '../mixins/unique-id'
 
   export default {
     components: { EcsButtonMore, EcsSkeletonLoader },
+    mixins: [uniqueIdMixin],
 
     props: {
       /** The label that shows up to the left of the list item. Usually describes the content to the left, e.g.: "Type", "Profiles", etc. */
@@ -106,7 +120,8 @@
 
     data () {
       return {
-        isVisible: this.visible
+        isVisible: this.visible,
+        expandId: ''
       }
     },
 
@@ -138,6 +153,10 @@
       visible(){
         this.isVisible = this.visible
       }
+    },
+
+    created() {
+      this.expandId = this.generateUniqueId()
     }
   }
 </script>

package/src/components/directory-entry/directory-entry.vue

@@ -83,14 +83,17 @@
       display: inline-block;
       position: relative;
       z-index: 1;
+      padding: 2px 4px;
+      border-radius: $border-radius-small;
+
+      &:focus-visible{
+        box-shadow: 0 0 0 2px $color-blue-9;
+      }
 
       &:after{
         content: "";
         position: absolute;
-        top: -2px;
-        left: -4px;
-        bottom: -2px;
-        right: -4px;
+        inset: 0;
         opacity: 0;
         transform: scale(.6);
         transition: opacity .15s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1.5);

package/src/components/document-state/document-state.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-document-state">
+  <div class="ecs-document-state" :aria-busy="loading">
     <div v-if="ocr" class="txt" />
     <div v-else class="no-txt" />
     <div v-if="instantView" class="instant" />

package/src/components/dropdown/dropdown.vue

@@ -1,13 +1,25 @@
 <template>
-  <div @click="handleClick" class="ecs-dropdown" :class="[sizeClass, disabled ? 'disabled' : '', inline ? 'inline' : '']">
+  <div @click="handleClick"
+    class="ecs-dropdown"
+    :class="[sizeClass, disabled ? 'disabled' : '', inline ? 'inline' : '']"
+    role="button"
+    :aria-disabled="disabled"
+    :tabindex="disabled ? '-1' : '0'">
     <div class="ecs-dropdown-inner">
       <slot></slot>
     </div>
+    <ecs-focus-ring :inset="-5" />
   </div>
 </template>
 
 <script>
+import EcsFocusRing from '../mixins/focus-ring'
+
 export default {
+  components: {
+    EcsFocusRing
+  },
+
   props: {
     /** Sets the size of the dropdown component. */
     size: {
@@ -60,10 +72,20 @@ export default {
   cursor: pointer;
   user-select: none;
 
+  &:focus-visible{
+    z-index: 1;
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:hover,
   &:focus{
     border-color: darken(rgba($color-gray-8, .4), 4%);
     box-shadow: 0 1px 1px rgba($color-gray-8, .1);
+    outline: none;
 
     &:after{
       opacity: .5;

package/src/components/dropzone/dropzone.vue

@@ -8,7 +8,9 @@
     @dragenter="dragging=true"
     @dragleave="dragging=false"
     @drop.prevent="drop"
-    @dragover.prevent>
+    @dragover.prevent
+    :aria-busy="loading || progress"
+    :aria-invalid="error">
 
     <input @change="change" type="file" :multiple="multiple" ref="file" />
 
@@ -16,7 +18,7 @@
       <ecs-skeleton-loader v-if="initializing" type="single" :width="100" class="ecs-dropzone-skeleton" />
       <div v-else>
         <template v-if="!$slots.customlabel">
-          Drag and drop your {{ fileTypeLabel }} or <i @click="() => this.$refs.file.click()">browse</i> to upload.
+          Drag and drop your {{ fileTypeLabel }} or <i @click="browseFile" @keydown.enter="browseFile" tabindex="0">browse<ecs-focus-ring /></i> to upload.
         </template>
         <div v-if="$slots.customlabel">
           <!-- @slot Slot for a custom main label. Note: this will replace the file selector button as well as drag & drop label. Should only be used for states that do not require a drop action, such as active virus scanning. -->
@@ -40,13 +42,15 @@
   import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
   import EcsProgress from '../progress/progress'
   import EcsButton from '../button/button'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
       EcsEmptyState,
       EcsSkeletonLoader,
       EcsProgress,
-      EcsButton
+      EcsButton,
+      EcsFocusRing
     },
 
     props: {
@@ -149,6 +153,10 @@
     },
 
     methods: {
+      browseFile() {
+        this.$refs.file.click()
+      },
+
       drop({ dataTransfer }) {
         this.dragging = false
         const files = dataTransfer.files
@@ -220,6 +228,16 @@
     font-weight: $font-weight-medium;
     font-style: normal;
     cursor: pointer;
+    position: relative;
+
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
   }
 
   &-skeleton{

package/src/components/empty-state/empty-state.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-empty-state">
+  <div class="ecs-empty-state" :aria-busy="type == 'loading'">
     <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :size="iconSize" />
     <div v-else class="ecs-empty-state-loading" />
     <div v-if="type!='loading'" class="ecs-empty-state-message" :class="size">