@everchron/ec-shards 6.2.2 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "6.2.2",
+  "version": "7.0.0",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/action-toolbar/action-toolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="action-bar">
-    <div class="ecs-action-toolbar">
+    <div class="ecs-action-toolbar" role="toolbar" aria-label="Actions">
       <slot></slot>
     </div>
   </transition>

package/src/components/alert/alert.vue

@@ -1,7 +1,8 @@
 <template>
-  <div v-if="show" class="ecs-alert" :class="[typeClass, dismissable ? 'ecs-alert-dismissable' : '', inset ? 'ecs-alert-inset' : '']">
-    <button v-if="dismissable" @click="dismiss" class="close">
+  <div v-if="show" class="ecs-alert" :class="[typeClass, dismissable ? 'ecs-alert-dismissable' : '', inset ? 'ecs-alert-inset' : '']" role="alert">
+    <button v-if="dismissable" @click="dismiss" class="close" aria-label="Dismiss">
       <ecs-icon type="close" size="20" />
+      <ecs-focus-ring />
     </button>
     <div class="ecs-alert-inner">
       <h4 v-if="headline" class="ecs-alert-headline">
@@ -12,15 +13,19 @@
         <slot></slot>
       </div>
     </div>
-    <button v-if="actionLabel" @click="$emit('action')" class="action">{{ actionLabel }}</button>
+    <button v-if="actionLabel" @click="$emit('action')" class="action">
+      {{ actionLabel }}
+      <ecs-focus-ring />
+    </button>
   </div>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
-    components: { EcsIcon },
+    components: { EcsIcon, EcsFocusRing },
 
     props: {
       /** The alert variant, which defines it's background color. */
@@ -166,6 +171,15 @@
     border-radius: 0 0 3px 3px;
     position: relative;
 
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
     &:before, 
     &:after{
       content: "";
@@ -244,6 +258,15 @@
         opacity: .15;
       }
     }
+
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
   }
 }
 </style>

package/src/components/avatar/avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="avatar" :style="[style, customStyle]" :class="partyClass">
+  <div class="avatar" :style="[style, customStyle]" :class="partyClass" :role="image ? 'img' : 'none'" :aria-label="name">
     <span v-if="!this.image">{{ userInitial }}</span>
   </div>
 </template>
@@ -165,6 +165,7 @@ export default {
   justify-content: center;
   align-items: center;
   position: relative;
+  user-select: none;
   font-weight: 700;
   color: rgba(#000, .2);
 

package/src/components/breadcrumb/breadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="ecs-breadcrumb" :class="sizeClass">
+  <nav class="ecs-breadcrumb" :class="sizeClass" aria-label="breadcrumb">
     <slot></slot>
-  </div>
+  </nav>
 </template>
 
 <script>

package/src/components/breadcrumb-button/breadcrumb-button.vue

@@ -9,18 +9,21 @@
   >
     <ecs-icon v-if="icon" :type="icon" size="20" />
     <ecs-icon v-if="type == 'more'" type="more" size="20" />
-    <span v-if="type != 'more'">
+    <span v-if="type != 'more'" class="ecs-breadcrumb-button-label">
       <slot></slot>
     </span>
+    <ecs-focus-ring />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsFocusRing
     },
 
     props: {
@@ -69,7 +72,16 @@
     max-width: 13%;
     cursor: default;
 
-    > span{
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
+    &-label{
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;

package/src/components/breadcrumb-title/breadcrumb-title.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-breadcrumb-title">
+  <div class="ecs-breadcrumb-title" aria-current="page">
     <slot></slot>
   </div>
 </template>

package/src/components/button/button.vue

@@ -1,5 +1,10 @@
 <template>
-  <a v-if="href && !addon" :href="href" :target="target"
+  <a v-if="href && !addon"
+    :href="href"
+    :target="target"
+    :aria-label="ariaLabel"
+    :aria-busy="loading"
+    role="button"
     class="ecs-button"
     :class="[
       typeClass,
@@ -15,9 +20,12 @@
 
     <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <slot></slot>
+    <ecs-focus-ring :inset="focusInset" :danger="type == 'danger' || type == 'danger-vibrant'" />
   </a>
 
-  <button v-else-if="!addon"
+  <button v-else-if="!addon" 
+    :aria-label="ariaLabel"
+    :aria-busy="loading"
     class="ecs-button"
     :class="[
       typeClass,
@@ -33,9 +41,11 @@
 
     <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <slot></slot>
+    <ecs-focus-ring :inset="focusInset" :danger="type == 'danger' || type == 'danger-vibrant'" />
   </button>
 
-  <button v-else
+  <button v-else 
+    aria-label="More"
     class="ecs-button ecs-button-addon"
     :class="[
       typeClass,
@@ -45,17 +55,20 @@
       <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M1 1.5L4 4.5L7 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
+      <ecs-focus-ring :inset="focusInset" :danger="type == 'danger' || type == 'danger-vibrant'" />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
   import EcsAnimations from '../animations/animations'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
       EcsIcon,
-      EcsAnimations
+      EcsAnimations,
+      EcsFocusRing
     },
     props: {
       /** Defines the type of button, as well as it's designated importance. */
@@ -79,7 +92,10 @@
       /** Turns the button into a loading state, which makes it appear disabled and replaces the default icon (if set) with a spinner. */
       loading: Boolean,
       /** Shows only an icon, without any text labels. The `icon` prop is required. */
-      iconOnly: Boolean,
+      iconOnly: {
+        type: Boolean,
+        default: false
+      },
       /** Makes the button to go full-width and take all available space of it's parent element. */
       fullWidth: Boolean,
       /** If the button should act as a link, you can set the href with this prop. */
@@ -87,7 +103,15 @@
       /** If the button should act as a link, this allows you to modify the target attribute. */
       target: String,
       /** Renders a small dropdown add-on button variant, which should only be used in combination with a regular button, and within an `EcsButtonGroup`. */
-      addon: Boolean
+      addon: Boolean,
+      /** Aria-label is needed for iconOnly buttons to improve accessibility for screenreaders. */
+      ariaLabel: {
+        type: String
+      },
+      /** Allows to customize the margin of the focus ring, which can be helpful when the button is placed inside overflow containers. */
+      focusInset: {
+        type: Number
+      }
     },
 
     computed: {
@@ -96,17 +120,20 @@
           return `ecs-button-${this.type}`
         return this.type
       },
+
       iconType() {
         if (this.loading)
           return `loading`
         else
           return this.icon
       },
+
       sizeClass() {
         if (this.size && this.size !== '')
           return `ecs-button-${this.size}`
         return this.size
       },
+
       iconSize() {
         if (this.size == 'sml')
           return '20'
@@ -117,6 +144,12 @@
         else
           return '30'
       }
+    },
+
+    mounted() {
+      if (this.iconOnly && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
+        console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
+      }
     }
   }
 </script>
@@ -169,6 +202,14 @@
     outline: none;
   }
 
+  &:focus-visible{
+    z-index: 2;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   .icon{
     margin-right: .4em;
     margin-left: -.4em;
@@ -233,10 +274,6 @@
       color: $color-blue-11;
     }
 
-    &:focus{
-      box-shadow: 0 0 0 2px rgba($color-blue-8, .1);
-    }
-
     &:active,
     &.active{
       color: $color-blue-10;
@@ -251,99 +288,81 @@
   }
 
   &-secondary{
-    color: $color-gray-8;
+    color: $color-gray-10;
 
     &:after{
-      background: rgba($color-gray-8, .07);
+      background: rgba($color-gray-10, .07);
     }
 
     &:hover{
-      color: $color-gray-10;
-    }
-
-    &:focus{
-      box-shadow: 0 0 0 2px rgba($color-gray-8, .1);
+      color: $color-gray-11;
     }
 
     &:active,
     &.active{
-      color: $color-gray-9;
+      color: $color-gray-11;
       background: $color-gray-1;
       box-shadow: none;
     }
 
     &.highlighted{
-      background: $color-gray-8;
+      background: $color-gray-10;
       color: #FFF;
     }
   }
 
   &-danger{
-    color: $color-gray-8;
+    color: $color-gray-10;
 
     &:after{
       background: rgba($color-red-8, .07);
     }
 
     &:hover{
-      color: $color-red-10;
-    }
-
-    &:focus{
-      box-shadow: 0 0 0 2px rgba($color-red-8, .1);
-      color: $color-red-9;
+      color: $color-red-12;
     }
 
     &:active,
     &.active{
-      color: $color-red-9;
+      color: $color-red-12;
       background: $color-red-2;
       box-shadow: none;
     }
   }
 
   &-danger-vibrant{
-    color: $color-red-9;
+    color: $color-red-11;
 
     &:after{
       background: rgba($color-red-8, .07);
     }
 
     &:hover{
-      color: $color-red-10;
-    }
-
-    &:focus{
-      box-shadow: 0 0 0 2px rgba($color-red-8, .1);
-      color: $color-red-9;
+      color: $color-red-12;
     }
 
     &:active,
     &.active{
-      color: $color-red-9;
+      color: $color-red-12;
       background: $color-red-2;
       box-shadow: none;
     }
   }
 
   &-warning{
-    color: $color-yellow-9;
+    color: $color-yellow-12;
 
     &:after{
       background: rgba($color-yellow-7, .14);
     }
 
     &:hover{
-      color: $color-yellow-10;
-    }
-
-    &:focus{
-      box-shadow: 0 0 0 2px rgba($color-yellow-7, .2);
+      color: $color-yellow-12;
     }
 
     &:active,
     &.active{
-      color: $color-yellow-10;
+      color: $color-yellow-12;
       background: $color-yellow-2;
       box-shadow: none;
     }
@@ -351,24 +370,20 @@
 
   &-create{
     color: #FFF;
-    background: $color-green-9;
+    background: $color-green-10;
 
     .icon{
       color: #FFF;
     }
 
     &:hover{
-      background: $color-green-10;
+      background: $color-green-11;
       box-shadow: 0 1px 0 rgba(#000, 0.02);
     }
 
-    &:focus{
-      box-shadow: 0 0 0 3px rgba($color-green-10, .1);
-    }
-
     &:active,
     &.active{
-      background: $color-green-10;
+      background: $color-green-11;
       box-shadow: none;
     }
   }
@@ -381,10 +396,6 @@
       background: $color-blue-10;
     }
 
-    &:focus{
-      box-shadow: 0 0 0 3px rgba($color-blue-10, .1);
-    }
-
     &:active,
     &.active{
       background: $color-blue-10;
@@ -418,7 +429,7 @@
 
 .ecs-button-addon{
   &.ecs-button-sml{
-    padding: 0 $spacing-5;
+    padding: 0 6px;
   }
 
   &.ecs-button-md{

package/src/components/button-collapse/button-collapse.vue

@@ -1,16 +1,30 @@
 <template>
   <button
     class="ecs-collapse-button"
+    :aria-expanded="!collapsed"
+    :aria-label="collapsed ? 'Expand' : 'Collapse'"
+    :aria-controls="ariaControls"
+    :aria-busy="loading"
+    :aria-disabled="disabled"
+    :disabled="disabled"
     :class="[
       typeClass,
       collapsed ? `collapsed` : '',
       loading ? `loading` : '']"
       @click="$emit('click', $event)">
+
+      <ecs-focus-ring />
   </button>
 </template>
 
 <script>
+  import EcsFocusRing from '../mixins/focus-ring'
+
   export default {
+    components: {
+      EcsFocusRing
+    },
+
     props: {
       /** Defines the type of button: `classic` shows a +/-, while `chevron` shows a rotating arrow. */
       type: {
@@ -22,6 +36,15 @@
       collapsed: Boolean,
       /** Turns the button into a loading state. */
       loading: Boolean,
+      /** Sets the button state to disabled and prevents click events. */
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      /** Pass the ID of the element which is expanded/collapsed by this button to improve accessiblity. */
+      ariaControls: {
+        type: String
+      }
     },
 
     computed: {
@@ -46,6 +69,14 @@
   cursor: pointer;
   flex-shrink: 0;
 
+  &:focus-visible{
+    z-index: 1;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &-chevron{
     transition: .3s;
     transform: rotate(45deg);
@@ -76,20 +107,20 @@
     &:after{
       content: "";
       position: absolute;
-      width: 11px;
-      height: 11px;
-      top: 4px;
-      left: 4px;
+      width: 20px;
+      height: 20px;
+      top: 0;
+      left: 0;
       transition: .2s;
     }
 
     &:before{
       opacity: 0;
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11"><g fill="none" fill-rule="evenodd"><rect width="10" height="10" x=".5" y=".5" fill="#858E9E" fill-opacity=".1" stroke="#858E9E" stroke-opacity=".5" rx="2"/><rect width="5" height="1" x="3" y="5" fill="#858E9E"/><rect width="1" height="5" x="5" y="3" fill="#858E9E"/></g></svg>');
+      background: svg-uri('<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="11" height="11" rx="2" fill="#858E9E" fill-opacity=".1"/><rect x="5.5" y="5.5" width="10" height="10" rx="1.5" stroke="#858E9E" stroke-opacity=".5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11 8h-1v2H8v1h2v2h1v-2h2v-1h-2V8Z" fill="#858E9E"/></svg>');
     }
 
     &:after{
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11"><g fill="none" fill-rule="evenodd"><rect width="10" height="10" x=".5" y=".5" fill="#FFFFFF" stroke="#858E9E" stroke-opacity=".5" rx="2"/><rect width="5" height="1" x="3" y="5" fill="#717987"/></g></svg>');
+      background: svg-uri('<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="11" height="11" rx="2" fill="#fff"/><rect x="5.5" y="5.5" width="10" height="10" rx="1.5" stroke="#858E9E" stroke-opacity=".5"/><path d="M13 10v1H8v-1h5Z" fill="#75798F"/></svg>');
     }
   }
 
@@ -127,4 +158,16 @@
     cursor: not-allowed;
   }
 }
+
+@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){
+  .ecs-collapse-button-classic{
+    &:before{
+      background: svg-uri('<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="4" width="12" height="12" rx="3" fill="#858E9E" fill-opacity=".1"/><rect x="4.5" y="4.5" width="11" height="11" rx="2.5" stroke="#858E9E" stroke-opacity=".5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 7.5h-1v2h-2v1h2v2h1v-2h2v-1h-2v-2Z" fill="#858E9E"/></svg>');
+    }
+
+    &:after{
+      background: svg-uri('<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="4" width="12" height="12" rx="3" fill="#fff"/><rect x="4.5" y="4.5" width="11" height="11" rx="2.5" stroke="#858E9E" stroke-opacity=".5"/><path d="M12.5 9.5v1h-5v-1h5Z" fill="#75798F"/></svg>');
+    }
+  }
+}
 </style>

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

@@ -1,6 +1,8 @@
 <template>
   <button
     class="ecs-context-button"
+    :aria-label="ariaLabel"
+    :arial-busy="loading"
     :class="[loading ? `loading` : '', iconOnly ? 'ecs-context-button-icon-only' : '']"
     :style="selectedColorText"
     @click="$emit('click', $event)">
@@ -8,15 +10,20 @@
     <ecs-icon v-if="icon || loading" :type="iconType" size="20" />
     <div v-if="selectedColor" class="ecs-context-button-color" :style="selectedColorBackground" />
     <slot></slot>
+    <ecs-focus-ring />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
+
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      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). */
       icon: {
@@ -33,6 +40,10 @@
         type: String,
         default: null
       },
+      /** Aria-label is needed for iconOnly buttons to improve accessibility for screenreaders. */
+      ariaLabel: {
+        type: String
+      }
     },
 
     computed: {
@@ -43,17 +54,26 @@
           return this.icon
         return this.icon
       },
+
       iconOnly() {
         return this.icon && !this.$slots.default
       },
+
       selectedColorBackground() {
         if (this.selectedColor)
           return `background-color:${this.selectedColor};`
       },
+
       selectedColorText() {
         if (this.selectedColor)
           return `color:${this.selectedColor};`
       }
+    },
+
+    mounted() {
+      if (this.iconOnly && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
+        console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
+      }
     }
   }
 </script>
@@ -75,6 +95,15 @@
   cursor: pointer;
   border-right: 1px solid #5D6067;
   flex-shrink: 0;
+  position: relative;
+
+  &:focus-visible{
+    z-index: 1;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
 
   .icon{
     margin: 0 4px 0 -4px;