@everchron/ec-shards 6.2.2 → 7.0.0

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

@@ -1,5 +1,9 @@
 <template>
-  <div class="ecs-entry-link" @click.stop="handleClick">
+  <div @click.stop="handleClick"
+    tabindex="0"
+    role="button"
+    class="ecs-entry-link">
+
     <div v-if="icon" class="entry-icon" :title="iconTitle">
       <ecs-icon v-if="icon" :type="icon" :color="iconColor" size="20" />
       <ecs-sticker v-if="sticker" :type="sticker" />
@@ -13,8 +17,9 @@
       <!-- @slot Slot for additional appended content that should follow the title. Use with care. -->
       <slot name="appender"></slot>
     </div>
+    <ecs-focus-ring :inset="0" :radius="6" />
 
-    <ecs-button-more v-if="moreButton" @click.stop="handleMoreButtonClick" type="ellipsis" :title="moreButtonTitle" />
+    <ecs-button-more v-if="moreButton" @click.stop="handleMoreButtonClick" type="ellipsis" :title="moreButtonTitle" :aria-label="moreButtonTitle" />
   </div>
 </template>
 
@@ -22,12 +27,14 @@
   import EcsIcon from '../icon/icon'
   import EcsSticker from '../sticker/sticker'
   import EcsButtonMore from '../button-more/button-more'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
       EcsIcon,
       EcsSticker,
-      EcsButtonMore
+      EcsButtonMore,
+      EcsFocusRing
     },
     props: {
       /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
@@ -117,6 +124,12 @@
   max-width: 100%;
   color: $color-gray-15;
 
+  &:focus-visible{
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:after{
     content: "";
     background: rgba($color-gray-8, .07);

package/src/components/favicon/favicon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-favicon" :class="this.website" />
+  <div class="ecs-favicon" :class="this.website" role="img" :alt="website + ' icon'" />
 </template>
 
 <script>

package/src/components/file-icon/file-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i class="icon ecs-file-icon" :class="typeClass" :style="{ width: width + 'px', height: height + 'px' }" />
+  <i class="icon ecs-file-icon" :class="typeClass" :style="{ width: width + 'px', height: height + 'px' }" role="presentation" />
 </template>
 
 <script>

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

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

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

@@ -1,9 +1,14 @@
 <template>
-  <div @click="$emit('click', $event)" class="ecs-file-list-entry" 
+  <div @click="$emit('click', $event)"
+    class="ecs-file-list-entry" 
     :class="[
       above ? 'ecs-file-list-entry-above' : '',
       hover ? 'hover' : '',
-      (interactiveHover && $slots.edit) ? 'hover' : '']">
+      (interactiveHover && $slots.edit) ? 'hover' : '']"
+    role="listitem"
+    :tabindex="hover ? '0' : '-1'">
+
+    <ecs-focus-ring v-if="hover" />
 
     <transition name="title">
       <div v-if="showTitleEdit || !edit" class="ecs-file-list-inner">
@@ -12,7 +17,7 @@
         <ecs-sticker v-if="(icon || fileIcon) && sticker" :type="sticker" />
 
         <div @click="$emit('title-click', $event)" @mouseover="setInteractiveHover" @mouseleave="interactiveHover = false" class="ecs-file-list-title">
-          <div class="title">
+          <div class="title" :aria-errormessage="error ? errorId : false">
             <slot></slot>
           </div>
         </div>
@@ -25,27 +30,46 @@
           <!-- @slot Slot for additional controls at the right side of the list item. -->
           <slot name="controls"></slot>
           <ecs-icon v-if="error" type="warning" color="#ff3750" class="ml-2" />
-          <button class="ecs-file-list-button expand"
-                  v-if="$slots.collapse"
-                  :class="isVisible ? '' : 'collapsed'"
-                  @click="toggleCollapse" />
-          <ecs-button-table v-if="remove" @click="$emit('remove', $event)" :loading="removeLoading" icon="close" class="remove" />
+          <button
+            v-if="$slots.collapse"
+            @click="toggleCollapse"
+            class="ecs-file-list-button expand"
+            :class="isVisible ? '' : 'collapsed'"
+            :aria-controls="expandId"
+            :aria-expanded="isVisible ? 'true' : 'false'"
+            :aria-label="isVisible ? 'Collapse' : 'Expand'">
+            <ecs-focus-ring />
+          </button>
+          <ecs-button-table
+            @click="$emit('remove', $event)"
+            v-if="remove"
+            :loading="removeLoading"
+            :disabled="removeLoading"
+            aria-label="Remove"
+            icon="close"
+            class="remove"
+          />
+        </div>
+        <div v-if="progress"
+          class="loading-bar"
+          :style="{ width: progress + '%' }"
+          role="progressbar"
+          :aria-valuenow="progress">
         </div>
-        <div v-if="progress" class="loading-bar" :style="{ width: progress + '%' }"></div>
       </div>
     </transition>
 
-    <div v-if="error" class="error">
+    <div v-if="error" class="error" :id="errorId">
       {{ error }}
     </div>
 
-    <div v-if="$slots.collapse" :class="isVisible ? 'collapse-show' : 'collapse-hide'">
+    <div v-if="$slots.collapse" :class="isVisible ? 'collapse-show' : 'collapse-hide'" :id="expandId" :aria-hidden="isVisible ? 'false' : 'true'">
       <!-- @slot Slot for expandable content. -->
       <slot name="collapse"></slot>
     </div>
 
     <transition name="edit">
-      <div v-if="$slots.edit && edit" :style="{ maxHeight: editHeight + 'px' }">
+      <div v-if="$slots.edit && edit" :style="{ maxHeight: editHeight + 'px' }" :id="editId">
         <div ref="edit" class="ecs-file-list-entry-edit">
           <!-- @slot Slot for content in the edit form. -->
           <slot name="edit"></slot>
@@ -60,9 +84,18 @@
   import EcsFileIcon from '../file-icon/file-icon'
   import EcsSticker from '../sticker/sticker'
   import EcsButtonTable from '../button-table/button-table'
+  import EcsFocusRing from '../mixins/focus-ring'
+  import { uniqueIdMixin } from '../mixins/unique-id'
 
   export default {
-    components: { EcsIcon, EcsFileIcon, EcsSticker, EcsButtonTable },
+    components: {
+      EcsIcon,
+      EcsFileIcon,
+      EcsSticker,
+      EcsButtonTable,
+      EcsFocusRing
+    },
+    mixins: [uniqueIdMixin],
 
     props: {
       /** Adds a button to the right of the list items, which allows to remove/delete the item. Emits the `@remove` event on click.  */
@@ -135,7 +168,9 @@
       return {
         isVisible: this.visible,
         editHeight: 0,
-        interactiveHover: false
+        interactiveHover: false,
+        expandId: '',
+        errorId: ''
       }
     },
 
@@ -172,6 +207,11 @@
           })
         }
       }
+    },
+
+    created() {
+      this.expandId = this.generateUniqueId()
+      this.errorId = this.generateUniqueId()
     }
   }
 </script>
@@ -186,6 +226,15 @@
     transition: .2s;
     background: #FFF;
 
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
     &:after{
       content: "";
       position: absolute;
@@ -297,7 +346,6 @@
     border-radius: $border-radius-x-small;
     margin-left: 20px;
     padding: 0;
-    opacity: .7;
     transition: .2s;
     position: relative;
 
@@ -305,6 +353,15 @@
       opacity: 1;
     }
 
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
     &:before{
       content: "";
       position: absolute;
@@ -312,19 +369,24 @@
       height: 16px;
       top: 0;
       left: 0;
+      opacity: .7;
     }
 
     &.expand{
       transform: rotate(180deg);
-      opacity: 1;
 
       &:before{
+        opacity: 1;
+        transition: .2s;
         background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polygon fill="#858E9E" points="8.009 11.2 12.8 6.003 11.708 4.819 8.009 8.829 4.292 4.8 3.2 5.984"/></svg>');
       }
 
       &.collapsed{
         transform: rotate(0);
-        opacity: .7;
+        
+        &:before{
+          opacity: .7;
+        }
       }
     }
   }

package/src/components/flag/flag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-flag" :class="this.code" />
+  <div class="ecs-flag" :class="this.code" role="img" :alt="flagTitle" />
 </template>
 
 <script>
@@ -45,6 +45,80 @@ export default {
         null
       ].includes(v)
     }
+  },
+
+  computed: {
+    flagTitle() {
+      switch (this.code) {
+        case 'ar':
+          return 'Flag of Argentina';
+        case 'bg':
+          return 'Flag of Bulgaria';
+        case 'zhcn':
+          return 'Flag of China';
+        case 'zhtw':
+          return 'Flag of China';
+        case 'da':
+          return 'Flag of Denmark';
+        case 'nl':
+          return 'Flag of Netherlands';
+        case 'en':
+          return 'Flag of United Kingdom';
+        case 'eu':
+          return 'Flag of European Union';
+        case 'gb':
+          return 'Flag of Great Britain';
+        case 'au':
+          return 'Flag of Australia';
+        case 'ca':
+          return 'Flag of Canada';
+        case 'et':
+          return 'Flag of Estonia';
+        case 'fr':
+          return 'Flag of France';
+        case 'de':
+          return 'Flag of Germany';
+        case 'el':
+          return 'Flag of Greece';
+        case 'he':
+          return 'Flag of Israel';
+        case 'it':
+          return 'Flag of Italy';
+        case 'ja':
+          return 'Flag of Japan';
+        case 'ko':
+          return 'Flag of Korea';
+        case 'lv':
+          return 'Flag of Latvia';
+        case 'lt':
+          return 'Flag of Lithuania';
+        case 'no':
+          return 'Flag of Norway';
+        case 'fa':
+          return 'Flag of Iran';
+        case 'pl':
+          return 'Flag of Poland';
+        case 'pt':
+          return 'Flag of Portugal';
+        case 'ro':
+          return 'Flag of Romania';
+        case 'ru':
+          return 'Flag of Russia';
+        case 'es':
+          return 'Flag of Spain';
+        case 'sv':
+          return 'Flag of Sweden';
+        case 'tr':
+          return 'Flag of Turkey';
+        case 'us':
+          return 'Flag of United States';
+        case 'null':
+        case null:
+          return 'Unknown flag';
+        default:
+          return `Flag of ${this.code}`;
+      }
+    }
   }
 }
 </script>

package/src/components/folder-selector/folder-selector.vue

@@ -2,7 +2,7 @@
   <div class="ecs-folder-selector" :class="[framed ? 'ecs-folder-selector-border' : '']" :style="{height: isFullHeight}">
     <div v-if="searchable || create" class="ecs-folder-selector-header">
       <ecs-input-search v-if="searchable" v-model="searchInputValue" @input="searchInput" type="naked" :show-clear="showClear" class="ecs-folder-selector-search" placeholder="Search for folders..." />
-      <ecs-button v-if="create" @click="handleAddFolder" icon="folder-new" class="ecs-folder-selector-add">Add Folder</ecs-button>
+      <ecs-button v-if="create" @click="handleAddFolder" icon="folder-new" class="ecs-folder-selector-add" :focus-inset="0">Add Folder</ecs-button>
     </div>
     <ecs-scroll-container :height="height" :padding="framed ? '8px' : '0'" borderless>
       <!-- @slot Should always contain an EcsTreeList with the selectable options. -->

package/src/components/form-check/form-check.vue

@@ -5,11 +5,16 @@
       disabled ? 'disabled' : '']">
 
     <slot></slot>
+    <ecs-focus-ring />
   </div>
 </template>
 
 <script>
+  import EcsFocusRing from '../mixins/focus-ring'
+
   export default {
+    components: { EcsFocusRing },
+
     props: {
       /** Sets the checkbox to disabled. */
       disabled: {
@@ -112,8 +117,10 @@
   // Box focus
   &:focus + label:before {
     outline: none;
-    border-color: rgba($color-blue-10, .3);
-    box-shadow: 0 0 0 2px rgba($color-blue-10, .2);
+  }
+
+  &:focus-visible ~ .ecs-focus-ring{
+    display: block;
   }
 
   // Box checked

package/src/components/form-set/form-set.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="ecs-form-set" :class="error ? 'error' : ''">
-    <h5 class="ecs-form-set-title">{{ title }}</h5>
+  <fieldset class="ecs-form-set" :class="error ? 'error' : ''" :aria-invalid="error">
+    <legend class="ecs-form-set-title">{{ title }}</legend>
     <slot></slot>
-  </div>
+  </fieldset>
 </template>
 
 <script>
@@ -31,6 +31,7 @@
   border-radius: $border-radius-medium;
   position: relative;
   padding: 25px 20px 20px 20px;
+  margin: 0;
 
   &-title{
     position: absolute;
@@ -50,5 +51,4 @@
     }
   }
 }
-
 </style>

package/src/components/index.js

@@ -55,6 +55,7 @@ import EcsFileListItem from "./file-list-item/file-list-item.vue"
 import EcsFlag from "./flag/flag.vue"
 import EcsFlexCol from "./flex/flex-col.vue"
 import EcsFlexRow from "./flex/flex-row.vue"
+import EcsFocusRing from "./mixins/focus-ring.vue"
 import EcsFolderSelector from "./folder-selector/folder-selector.vue"
 import EcsFormCheck from "./form-check/form-check.vue"
 import EcsFormGroup from "./form-group/form-group.vue"
@@ -190,6 +191,7 @@ const Components = {
   EcsFlag,
   EcsFlexCol,
   EcsFlexRow,
+  EcsFocusRing,
   EcsFolderSelector,
   EcsFormCheck,
   EcsFormGroup,

package/src/components/input-clear/input-clear.vue

@@ -1,16 +1,25 @@
 <template>
-  <div class="ecs-input-clear">
-    <button @click="$emit('click', $event)" :title="tooltip" class="ecs-input-clear-button" />
+  <div class="ecs-input-clear" :aria-busy="loading">
+    <button
+      @click="$emit('click', $event)"
+      @keydown.enter="$emit('click', $event)"
+      :title="tooltip"
+      class="ecs-input-clear-button"
+      aria-label="Clear">
+      <ecs-focus-ring :radius="24" />
+    </button>
     <ecs-icon v-if="loading" type="loading" size="32" spinning color="#AEB1B9" />
   </div>
 </template>
 
 <script>
 import EcsIcon from '../icon/icon'
+import EcsFocusRing from '../mixins/focus-ring'
 
 export default {
   components: {
-    EcsIcon
+    EcsIcon,
+    EcsFocusRing
   },
 
   props: {
@@ -56,6 +65,14 @@ export default {
     &:hover{
       opacity: 1;
     }
+
+    &:focus-visible{
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
   }
 
   .icon{

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

@@ -1,12 +1,12 @@
 <template>
   <ecs-button-toolbar-group class="ecs-viewer-toolbar-jumper">
-    <ecs-button-toolbar @click="$emit('goToPrev')" :disabled="currentEntry == 1 || navigating" class="previous" :title="prevTooltip" icon="toolbar-page-navigation" />
+    <ecs-button-toolbar @click="$emit('goToPrev')" :disabled="currentEntry == 1 || navigating" class="previous" :title="prevTooltip" icon="toolbar-page-navigation" :aria-label="ariaLabelPrev" />
     <div v-if="showCount" class="ecs-viewer-toolbar-jumper-inputs">
-      <div v-html="currentEntry" @click="$emit('selectCurEntryText')" @keydown="indexPosKeyPressed" @blur="$emit('blur')" contenteditable class="ecs-viewer-toolbar-jumper-input" :disabled="navigating" id="currEntry"></div>
+      <div @click="$emit('selectCurEntryText')" @keydown="indexPosKeyPressed" @blur="$emit('blur')" contenteditable class="ecs-viewer-toolbar-jumper-input" :disabled="navigating" id="currEntry">{{ currentEntry }}</div>
       /&nbsp;
       <div>{{ totalEntries }}</div>
     </div>
-    <ecs-button-toolbar @click="$emit('goToNext')" :disabled="currentEntry == totalEntries || navigating" class="next" :title="nextTooltip" icon="toolbar-page-navigation" />
+    <ecs-button-toolbar @click="$emit('goToNext')" :disabled="currentEntry == totalEntries || navigating" class="next" :title="nextTooltip" icon="toolbar-page-navigation" :aria-label="ariaLabelNext" />
   </ecs-button-toolbar-group>
 </template>
 
@@ -52,11 +52,20 @@
         else
           return ''
       },
+
       nextTooltip(){
         if(this.currentEntry != this.totalEntries)
           return this.tooltipNoun ? `Next ${ this.tooltipNoun }` : 'Next'
         else
           return ''
+      },
+
+      ariaLabelPrev(){
+        return this.tooltipNoun ? `Previous ${this.tooltipNoun}` : 'Previous' 
+      },
+
+      ariaLabelNext() {
+        return this.tooltipNoun ? `Next ${this.tooltipNoun}` : 'Next'
       }
     },
 
@@ -97,7 +106,6 @@
 
   &-input{
     border-radius: $border-radius-small;
-    transition: .2s;
     background-color: rgba(90, 97, 102, 0.15);
     border: none;
     display: block;
@@ -108,6 +116,10 @@
     font-size: $type-scale-3-font-size;
     width: auto;
     color: $color-gray-13;
+
+    &:focus{
+      outline: 1px solid $color-gray-5;
+    }
   }
 }
 </style>

package/src/components/jumper-index/jumper-index.vue

@@ -1,16 +1,18 @@
 <template>
   <ecs-button-toolbar-group class="ecs-jumper">
-    <ecs-button-toolbar @click="previousSearchResult" :disabled="currentCount <= 1" :title="prevTooltip" class="ecs-jumper-previous" />
+    <ecs-button-toolbar @click="previousSearchResult" :disabled="currentCount <= 1" :title="prevTooltip" :aria-label="ariaLabelPrev" class="ecs-jumper-previous" />
     <div class="ecs-jumper-count" v-if="showCount && !inputPagination">
       <span class="ecs-jumper-count-current">{{ currentPosition }}</span>
       <span class="ecs-jumper-count-total">/{{ maxCount }}</span>
     </div>
     <div class="ecs-jumper-count-inputs" v-if="inputPagination">
-      <div v-html="currentCount" @click="selectSearchResultCount" @keydown="setSearchResultCount" class="ecs-jumper-count-input" contenteditable></div>
+      <div @click="selectSearchResultCount" @keydown="setSearchResultCount" class="ecs-jumper-count-input" contenteditable>
+        {{ currentCount }}
+      </div>
       of&nbsp;
       <div>{{ maxCount }}</div>
     </div>
-    <ecs-button-toolbar @click="nextSearchResult" :disabled="currentCount == maxCount" :title="nextTooltip" class="ecs-jumper-next" />
+    <ecs-button-toolbar @click="nextSearchResult" :disabled="currentCount == maxCount" :title="nextTooltip" :aria-label="ariaLabelNext" class="ecs-jumper-next" />
   </ecs-button-toolbar-group>
 </template>
 
@@ -55,17 +57,27 @@
       currentPosition(){
         return this.currentCount < 1 ? '-' : this.currentCount
       },
+
       prevTooltip(){
         if(this.currentCount > 1)
           return this.tooltipNoun ? `Previous ${ this.tooltipNoun }` : 'Previous'
         else
           return ''
       },
+
       nextTooltip(){
         if(this.currentCount != this.maxCount)
           return this.tooltipNoun ? `Next ${ this.tooltipNoun }` : 'Next'
         else
           return ''
+      },
+
+      ariaLabelPrev() {
+        return this.tooltipNoun ? `Previous ${this.tooltipNoun}` : 'Previous'
+      },
+
+      ariaLabelNext() {
+        return this.tooltipNoun ? `Next ${this.tooltipNoun}` : 'Next'
       }
     },
     
@@ -143,7 +155,6 @@
 
     &-input{
       border-radius: $border-radius-small;
-      transition: .2s;
       background-color: rgba(90, 97, 102, 0.15);
       border: none;
       display: block;
@@ -154,6 +165,10 @@
       font-size: $type-scale-3-font-size;
       width: auto;
       color: $color-gray-13;
+
+      &:focus{
+        outline: 1px solid $color-gray-5;
+      }
     }
   }
 }

package/src/components/jumper-page/jumper-page.vue

@@ -4,7 +4,9 @@
 
       <template v-if="showRelative">
         <div class="ecs-viewer-pages-pagination">
-          <div v-html="currentPage" @click="$emit('selectCurPageText')" @keydown="pageKeyPressed($event, 'relative')" @blur="$emit('currentPageBlurred')" contenteditable class="current-page" id="currPage"></div>
+          <div @click="$emit('selectCurPageText')" @keydown="pageKeyPressed($event, 'relative')" @blur="$emit('currentPageBlurred')" contenteditable class="current-page" id="currPage">
+            {{ currentPage }}
+          </div>
           <div class="total-pages">of {{ lastPage }}</div>
         </div>
         <div class="ecs-viewer-pages-pagination">

package/src/components/layout-data-table/layout-data-table.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-data-layout">
-    <div class="ecs-data-layout-content">
-      <div v-if="$slots.toolbar" class="ecs-data-layout-toolbar">
+    <main class="ecs-data-layout-content">
+      <div v-if="$slots.toolbar" role="toolbar" aria-label="Main" class="ecs-data-layout-toolbar">
         <!-- @slot Slot for a toolbar. -->
         <slot name="toolbar"></slot>
       </div>
@@ -14,9 +14,9 @@
       <div class="ecs-data-layout-data">
         <slot></slot>
       </div>
-    </div>
+    </main>
 
-    <div v-if="$slots.sidebarcontent || $slots.sidebarheader" class="ecs-data-layout-sidebar" :class="sidebarExpanded ? 'expanded' : ''">
+    <aside v-if="$slots.sidebarcontent || $slots.sidebarheader" class="ecs-data-layout-sidebar" :class="sidebarExpanded ? 'expanded' : ''">
       <div class="ecs-data-layout-sidebar-inner">
         <div v-if="$slots.sidebarheader" class="ecs-data-layout-sidebar-header">
           <!-- @slot Slot for the content of the sidebar header. -->
@@ -28,7 +28,7 @@
           <slot name="sidebarcontent"></slot>
         </div>
       </div>
-    </div>
+    </aside>
   </div>
 </template>
 

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

@@ -8,14 +8,14 @@
 
     <div class="ecs-directory-layout-wrap">
       <div class="ecs-directory-layout-contents">
-        <div v-if="$slots.directory" class="ecs-directory-layout-directory">
+        <aside v-if="$slots.directory" class="ecs-directory-layout-directory">
           <!-- @slot Slot for the directory list items. -->
           <slot name="directory"></slot>
-        </div>
-        <div class="ecs-directory-layout-entry scrollbar" :class="[$slots.sidebar ? 'has-sidebar' : '']">
+        </aside>
+        <main class="ecs-directory-layout-entry scrollbar" :class="[$slots.sidebar ? 'has-sidebar' : '']">
           <!-- @slot Slot for the main content area. -->
           <slot></slot>
-        </div>
+        </main>
         <div v-if="$slots.sidebar" class="ecs-directory-layout-sidebar">
           <!-- @slot Slot for the sidebar. -->
           <slot name="sidebar"></slot>