@everchron/ec-shards 6.2.2 → 7.0.0

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

@@ -7,7 +7,7 @@
     <slot name="action-toolbar"></slot>
 
     <div class="ecs-index-layout-wrap" :class="[indent ? 'indent' : '']">
-      <div class="ecs-index-layout-contents">
+      <main class="ecs-index-layout-contents">
         <div class="ecs-index-layout-table scrollbar">
           <slot></slot>
         </div>
@@ -15,7 +15,7 @@
           <!-- @slot Slot for the pagination control. -->
           <slot name="pagination"></slot>
         </div>
-      </div>
+      </main>
 
       <div v-if="$slots.sidebar" class="ecs-index-layout-sidebar" :class="[overlaySidebar ? 'overlay' : '']" :style="sidebarPosition">
         <!-- @slot Slot for the sidebar. -->

package/src/components/legend-item/legend-item.vue

@@ -1,5 +1,8 @@
 <template>
   <ecs-flex-row
+    @click="$emit('click', $event)"
+    :role="hover ?  'button' : false"
+    :tabindex="hover ? '0' : '-1'"
     class="ecs-legend-item"
     :gap="8"
     :class="[
@@ -12,15 +15,18 @@
     <div v-if="count" class="ecs-legend-item-count">{{ count }}</div>
     <div v-if="percentage" class="ecs-legend-item-percentage">{{ percentageLabel }}</div>
     <div v-if="highlight || hover" class="ecs-legend-item-highlight" :style="{backgroundColor: validColor}" />
+    <ecs-focus-ring v-if="hover" />
   </ecs-flex-row>
 </template>
 
 <script>
 import EcsFlexRow from '../flex/flex-row'
+import EcsFocusRing from '../mixins/focus-ring'
 
 export default {
   components: {
-    EcsFlexRow
+    EcsFlexRow,
+    EcsFocusRing
   },
 
   props: {
@@ -102,6 +108,14 @@ export default {
   z-index: 1;
   cursor: default;
 
+  &:focus-visible{
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &-sml{
     font-size: $type-scale-2-font-size;
     line-height: $type-scale-2-line-height;

package/src/components/log-message/log-message.vue

@@ -1,5 +1,11 @@
 <template>
-  <ecs-flex-row class="ecs-log-message" :class="[type, highlight ? 'highlighted' : '']" align="start" :style="padding">
+  <ecs-flex-row
+    class="ecs-log-message"
+    :class="[type, highlight ? 'highlighted' : '']"
+    :role="alertRole"
+    :aria-busy="loading"
+    align="start"
+    :style="padding">
     <ecs-skeleton-loader v-if="loading && type != 'blank'" type="rect" :width="16" :height="16" />
     <ecs-sticker v-else-if="type != 'blank'" :type="type" />
     <div class="ecs-log-message-content">
@@ -53,6 +59,10 @@ export default {
   computed: {
     padding() {
       return 'padding-left: ' + this.verticalPadding + '; padding-right: ' + this.verticalPadding + ';'
+    },
+
+    alertRole() {
+      return ['warning', 'error'].includes(this.type) ? 'alert' : null;
     }
   }
 }

package/src/components/map/map.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="ecs-map" :class="[marker ? `ecs-map-marker` : '']">
-    <a target="_blank" :href="mapUrl">
-      <img :src="mapImageUrl">
+  <div class="ecs-map" :class="[marker ? 'ecs-map-marker' : '']">
+    <a target="_blank" :href="mapUrl" title="View on Google Maps">
+      <img :src="mapImageUrl" :alt="'Map of ' + address">
+      <ecs-focus-ring :inset="0" :radius="4"/>
     </a>
   </div>
 </template>
 
 <script>
+  import EcsFocusRing from '../mixins/focus-ring'
+
   export default {
+    components: { EcsFocusRing },
+
     props: {
       /** Address of the location, needs to be known by Google Maps. */
       address: {
@@ -25,6 +30,7 @@
       mapUrl() {
         return `https://www.google.com/maps/place/${this.address}`
       },
+
       mapImageUrl() {
         return `https://maps.googleapis.com/maps/api/staticmap?maptype=terrain&sensor=false&format=png&zoom=13&key=AIzaSyBEv9bJVd1MU5zSs_Ezxkvc8FOfIO7Q1Fk&visual_refresh=true&scale=2&size=320x220&style=feature:poi|visibility:off&center=${this.address}`
       }
@@ -48,6 +54,17 @@
     display: block;
   }
 
+  a{
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+  }
+
   &-marker{
     &:before{
       content: "";

package/src/components/mixins/focus-ring.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="ecs-focus-ring" :style="styles" :class="danger ? 'ecs-focus-ring-danger' : ''" />
+</template>
+
+<script>
+export default {
+  props: {
+    /** Defines the distance of the focus ring from it focusable element. Should be smaller than `0` (negative) in almost all cases. */
+    inset: {
+      type: Number,
+      default: -4
+    },
+    /** Defines the border radius of the focus ring. The radius depends on the inset and the radius of the focused element. A general rule of the radius to be applied is: `radius` = `element radius` - (-`inset`/2). */
+    radius: {
+      type: Number,
+      default: 8
+    },
+    /** Sets the focus ring color to red, which should be used for destructive actions. */
+    danger: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    styles(){
+      return `inset: ${this.inset}px; border-radius: ${this.radius}px;`;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "../../tokens/build/scss/tokens.scss";
+
+  .ecs-focus-ring{
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+    display: none;
+    border: 2px solid $color-blue-9;
+
+    &-danger{
+      border-color: $color-red-10;
+    }
+  }
+</style>

package/src/components/mixins/unique-id.js

@@ -0,0 +1,17 @@
+export const uniqueIdMixin = {
+  data() {
+    return {
+      uniqueId: '',
+    }
+  },
+  created() {
+    this.uniqueId = this.generateUniqueId()
+  },
+  methods: {
+    generateUniqueId() {
+      const timestamp = new Date().getTime()
+      const random = Math.floor(Math.random() * 100000)
+      return `uid_${timestamp}_${random}`
+    },
+  },
+}

package/src/components/modal/modal.vue

@@ -1,6 +1,9 @@
 <template>
   <transition name="dialog-fade">
-    <div v-if="isShown" class="ecs-modal" :class="[typeClass, clickthrough ? 'ecs-modal-click-through' : '']">
+    <div
+      v-if="isShown"
+      class="ecs-modal"
+      :class="[typeClass, clickthrough ? 'ecs-modal-click-through' : '']">
 
       <div class="ecs-modal-dialog ecs-modal-sheet" :style="fixedHeightStyle">
         <div v-if="$slots.header" class="ecs-modal-header-wrap">
@@ -173,7 +176,7 @@
     }
   }
 
-  .ecs-dialog{
+  &-inner-dialog .ecs-dialog{
     position: absolute;
     top: 0;
     z-index: 1;

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

@@ -1,10 +1,20 @@
 <template>
   <div class="ecs-modal-header" :class="typeClass">
-    <div class="ecs-modal-header-main">
+    <div class="ecs-modal-header-main" ref="firstFocusable" tabindex="0">
       <div class="ecs-modal-header-main-inner">
         <slot></slot>
       </div>
-      <button @click="$emit('close')" title="Close" class="ecs-modal-header-close"></button>
+      <ecs-button
+        @click="$emit('close')"
+        title="Close"
+        aria-label="Close"
+        icon="close"
+        icon-only
+        type="secondary"
+        size="lg"
+        :focus-inset="-1"
+        data-close-button
+        data-test="close-modal-button" />
     </div>
     <div v-if="$slots.extension" class="ecs-modal-header-extended">
       <!-- @slot Slot for a header extension row that appears underneath the main header. Can be used for tabs, sequence maps, etc. -->
@@ -14,7 +24,15 @@
 </template>
 
 <script>
+import EcsFocusRing from '../mixins/focus-ring'
+import EcsButton from '../button/button'
+
   export default {
+    components: {
+      EcsButton,
+      EcsFocusRing
+    },
+
     props: {
       /** Sets the visual style of the modal header. Tabs should always be used when the modal tab header contains a tab bar, while Scroll can be used as an optional indicator for scrollable modals with long contents. */
       type: {
@@ -30,6 +48,29 @@
           return `ecs-modal-header-${this.type}`
         return this.type
       }
+    },
+
+    mounted() {
+      document.addEventListener('keydown', this.handleKeyDown);
+
+      this.$nextTick(() => {
+        this.$refs.firstFocusable.focus();
+      });
+    },
+
+    beforeUnmount() {
+      document.removeEventListener('keydown', this.handleKeyDown);
+    },
+
+    methods: {
+      handleKeyDown(event) {
+        if (event.keyCode === 27) { // Esc
+          const closeButton = document.querySelector('[data-close-button]');
+          if (closeButton) {
+            closeButton.focus();
+          }
+        }
+      }
     }
   }
 </script>
@@ -76,23 +117,6 @@
   &-extended{
     padding: 5px 0 0 0;
   }
-
-  &-close{
-    cursor: pointer;
-    width: 40px;
-    height: 40px;
-    border-radius: $border-radius-small;
-    padding: 0;
-    transition: .2s;
-    opacity: .7;
-    flex-shrink: 0;
-    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" fill-rule="evenodd" stroke="#929AA9" stroke-linecap="round" stroke-width="1.8" transform="translate(14 14)"><line x2="12" y2="12" transform="matrix(-1 0 0 1 12 0)"/><line x2="12" y2="12"/></g></svg>');
-
-    &:hover{
-      opacity: 1;
-      background-color: rgba(#000, .05);
-    }
-  }
 }
 </style>
 

package/src/components/multiselect-option/multiselect-option.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-multiselect-option" :class="typeClass">
+  <div class="ecs-multiselect-option" :class="typeClass" :role="type == 'key' ? 'menuitem' : false">
     <ecs-icon v-if="icon" :type="icon" size="20" />
     <slot></slot>
   </div>

package/src/components/multiselect-search-token/multiselect-search-token.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="ecs-multiselect-search-token" :class="typeClass">
+  <div
+    class="ecs-multiselect-search-token"
+    :class="typeClass" tabindex="0"
+    @keydown.delete="$emit('remove', $event)">
+
     <div v-if="icon || operator" class="symbol">
       <ecs-icon :type="icon" size="20" color="#FFF" />
       <div v-if="operator && !operatorSelect" class="operator">{{ operator }}</div>
@@ -10,8 +14,9 @@
     <div class="query">
       <div v-if="descriptor" class="descriptor">{{ descriptor }}</div>
       <slot></slot>
-      <button @click="$emit('remove', $event)" class="remove" title="Remove">
+      <button @click="$emit('remove', $event)" @keyup.enter="$emit('remove', $event)" class="remove" title="Remove" aria-label="Remove">
         <ecs-icon type="close" size="14" color="#FFF" />
+        <ecs-focus-ring :radius="12" />
       </button>
     </div>
   </div>
@@ -19,13 +24,16 @@
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
   import EcsSelectText from '../select-text/select-text'
 
   export default {
     components: {
       EcsIcon,
+      EcsFocusRing,
       EcsSelectText
     },
+
     props: {
       /** Sets the type of the search token: default should be used for any search query that is not a NOT query. */
       type: {
@@ -81,18 +89,23 @@
 @import "../../tokens/build/scss/tokens.scss";
 
 .ecs-multiselect-search-token{
-  border-radius: $border-radius-x-small;
+  border-radius: $border-radius-small;
   display: flex;
   height: 24px;
   z-index: 1;
   position: relative;
+  overflow: hidden;
+
+  &:focus-visible{
+    outline: 2px solid $color-blue-9;
+  }
 
   > div:first-child{
-    border-radius: 3px 0 0 3px;
+    border-radius: $border-radius-small 0 0 $border-radius-small;
   }
 
   > div:last-child{
-    border-radius: 0 3px 3px 0;
+    border-radius: 0 $border-radius-small $border-radius-small 0;
   }
 
   &-default{
@@ -186,12 +199,26 @@
     top: 0;
     cursor: pointer;
 
+    &:focus-visible{
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+        left: 14px !important;
+        top: 1px !important;
+        bottom: 1px !important;
+        right: 0 !important;
+      }
+    }
+
     .icon{
       border-radius: 100%;
     }
   }
 
-  &:hover{
+  &:hover,
+  &:focus-visible,
+  &:focus-within{
     .remove{
       transform: translateX(-36px);
     }

package/src/components/multiselect-token/multiselect-token.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="ecs-multiselect-token">
+  <div
+    class="ecs-multiselect-token"
+    tabindex="0"
+    @keydown.delete="$emit('remove', $event)">
+
     <slot></slot>
     <button @click="$emit('remove', $event)" class="remove">
       <ecs-icon type="close" size="14" color="#FFF" />
+      <ecs-focus-ring :radius="12" />
     </button>
   </div>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsFocusRing
     }
   }
 </script>
@@ -33,6 +40,10 @@
   color: rgba($color-blue-14, .8);
   display: inline-block;
 
+  &:focus-visible{
+    outline: 2px solid $color-blue-9;
+  }
+
   .remove{
     padding: 0 4px 0 0;
     background-image: linear-gradient(90deg, rgba(206,220,235,0.00) 0%, $color-blue-2 50%);
@@ -47,6 +58,18 @@
     top: 0;
     cursor: pointer;
 
+    &:focus-visible{
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+        left: 14px !important;
+        top: 3px !important;
+        bottom: 3px !important;
+        right: 0px !important;
+      }
+    }
+
     .icon{
       border-radius: 100%;
       background: $color-blue-11;
@@ -54,7 +77,9 @@
     }
   }
 
-  &:hover{
+  &:hover,
+  &:focus-visible,
+  &:focus-within{
     .remove{
       transform: translateX(-36px);
     }

package/src/components/overlay/overlay.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div v-if="isShown" class="ecs-overlay" :style="{ top: offsetTop + 'px', height: 'calc(100vh - '+ offsetTop +'px' }">
-      <div class="ecs-overlay-header">
+      <header class="ecs-overlay-header">
         <div class="ecs-overlay-titles">
           <ecs-icon v-if="icon" :type="icon" size="40" color="#B9BCC2" />
           <div>
@@ -25,8 +25,8 @@
           class="sidebar-button"
         />
         <ecs-button-toolbar @click="$emit('close')" :disabled="closeDisabled" icon="close">{{ closeText }}</ecs-button-toolbar>
-      </div>
-      <div ref="content" class="ecs-overlay-content scrollbar">
+      </header>
+      <main ref="content" class="ecs-overlay-content scrollbar" :aria-busy="blockContent">
         <div v-if="$slots.tabs" class="ecs-overlay-tabs scrollbar scrollbar-sml">
           <!-- @slot Slot for a tab bar. -->
           <slot name="tabs"></slot>
@@ -47,8 +47,8 @@
           </transition>
         </div>
         <div v-if="blockContent" class="ecs-overlay-content-block" />
-      </div>
-      <div v-if="$slots.footer" class="ecs-overlay-footer">
+      </main>
+      <footer v-if="$slots.footer" class="ecs-overlay-footer">
         <div v-if="$slots.tabs" class="spacer-tabs" />
         <div class="ecs-overlay-footer-content">
           <div class="ecs-overlay-footer-content-inner" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth, paddingLeft: contentPadding, paddingRight: contentPadding }">
@@ -58,7 +58,7 @@
           <div v-if="$slots.sidebar && width > 1500" class="spacer-sidebar" />
           <div v-if="footerScrollSpacer" class="spacer-scrollbar" />
         </div>
-      </div>
+      </footer>
     </div>
   </transition>
 </template>

package/src/components/pagination/pagination.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="ecs-pagination" :class="[ floating ? 'ecs-pagination-floating' : '' ]">
+  <div class="ecs-pagination" :class="[ floating ? 'ecs-pagination-floating' : '' ]" role="navigation" aria-label="Index">
     <ecs-flex-row :gap="8" class="ecs-pagination-nav" :style="{minWidth: tabsSpacing - 4 + 'px'}">
       <template v-if="type == 'paginated'">
         <ecs-flex-row>
-          <ecs-button @click="$emit('firstPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-double-left" icon-only type="secondary" title="First Page" data-test="pagination-first-button" />
-          <ecs-button @click="$emit('prevPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-left" icon-only type="secondary" title="Previous Page" data-test="pagination-previous-button" />
+          <ecs-button @click="$emit('firstPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-double-left" icon-only type="secondary" title="First Page" aria-label="First Page" data-test="pagination-first-button" />
+          <ecs-button @click="$emit('prevPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-left" icon-only type="secondary" title="Previous Page" aria-label="Previous Page" data-test="pagination-previous-button" />
         </ecs-flex-row>
         <ecs-flex-row :gap="4">
           <span>Page</span>
@@ -14,8 +14,8 @@
           <span v-if="totalPages" class="total">of {{ totalPages }}</span>
         </ecs-flex-row>
         <ecs-flex-row>
-          <ecs-button @click="$emit('nextPage', $event)" :disabled="loading || currentPage === totalPages || totalPages === 0" icon="chevron-right" icon-only type="secondary" title="Next Page" data-test="pagination-next-button" />
-          <ecs-button @click="$emit('lastPage', $event)" :disabled="loading || currentPage === totalPages || totalPages === 0" icon="chevron-double-right" icon-only type="secondary" title="Last Page" data-test="pagination-last-button" />
+          <ecs-button @click="$emit('nextPage', $event)" :disabled="loading || currentPage === totalPages || totalPages === 0" icon="chevron-right" icon-only type="secondary" title="Next Page" aria-label="Next Page" data-test="pagination-next-button" />
+          <ecs-button @click="$emit('lastPage', $event)" :disabled="loading || currentPage === totalPages || totalPages === 0" icon="chevron-double-right" icon-only type="secondary" title="Last Page" aria-label="Last Page" data-test="pagination-last-button" />
         </ecs-flex-row>
       </template>
       <template v-else-if="hasRange">

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

@@ -1,5 +1,9 @@
 <template>
-  <ul class="ecs-popover-list" :class="inner ? 'ecs-popover-list-inner' : ''">
+  <ul
+    class="ecs-popover-list"
+    :class="inner ? 'ecs-popover-list-inner' : ''"
+    role="menu"
+    aria-orientation="vertical">
     <slot></slot>
   </ul>
 </template>

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

@@ -1,5 +1,8 @@
 <template>
-  <li class="ecs-popover-list-title" :class="[sticky ? 'ecs-popover-list-title-sticky' : 'ecs-popover-list-title-default', sticky && $slots.controls ? 'has-controls' : '']">
+  <li
+    class="ecs-popover-list-title"
+    :class="[sticky ? 'ecs-popover-list-title-sticky' : 'ecs-popover-list-title-default', sticky && $slots.controls ? 'has-controls' : '']"
+    role="heading">
     <span>
       <slot></slot>
     </span>