@everchron/ec-shards 6.2.2 → 7.0.0

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

@@ -1,16 +1,22 @@
 <template>
-  <button class="ecs-dialog-footer-button" :class="[typeClass, loading ? `loading` : '']" @click="$emit('click', $event)">
+  <button @click="$emit('click', $event)"
+    :class="[typeClass, loading ? `loading` : '']"
+    :arial-busy="loading"
+    class="ecs-dialog-footer-button">
     <ecs-icon v-if="icon || loading" :type="iconType" />
     <slot></slot>
+    <ecs-focus-ring :radius="12" :danger="type == 'danger'" />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsFocusRing
     },
 
     props: {
@@ -65,10 +71,11 @@
     justify-content: center;
     cursor: pointer;
     flex-shrink: 0;
+    position: relative;
 
     .icon{
       margin-right: $spacing-10;
-      opacity: .8;
+      opacity: .9;
     }
 
     &:hover{
@@ -79,24 +86,31 @@
       }
     }
 
-    &:focus,
+    &:focus-visible{
+      z-index: 1;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
     &:active{
       background: rgba($color-gray-13, .04);
     }
 
     &-confirm{
-      color: $color-blue-8;
+      color: $color-blue-10;
 
       &:hover{
-        color: $color-blue-10;
+        color: $color-blue-11;
       }
     }
 
     &-danger{
-      color: $color-red-9;
+      color: $color-red-11;
 
       &:hover{
-        color: $color-red-10;
+        color: $color-red-12;
       }
     }
 

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

@@ -1,21 +1,29 @@
 <template>
   <button
+    @click="$emit('click', $event)"
+    :aria-label="ariaLabel"
+    :aria-disabled="disabled"
+    :aria-expanded="active"
+    :aria-haspopup="type == 'dropdown'"
+    :disabled="disabled"
     :class="[ active ? `active` : '',
               typeClass
-            ]"
-    @click="$emit('click', $event)">
+            ]">
 
     <ecs-icon v-if="type == 'ellipsis'" type="more" size="20" color="#FFF" />
     <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: {
@@ -27,6 +35,14 @@
         validator: v => ['dropdown', 'ellipsis', 'expand'].includes(v),
         default: 'dropdown'
       },
+      /** Provide a meaningful label for the button to improve accessibility for screenreaders. */
+      ariaLabel: {
+        type: String
+      },
+      /** Disables the button and prevent pointer events. */
+      disabled: {
+        type: Boolean
+      }
     },
 
     computed: {
@@ -35,6 +51,12 @@
           return `ecs-button-more-${this.type}`
         return this.type
       }
+    },
+
+    mounted() {
+      if (this.$slots.default === undefined && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
+        console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
+      }
     }
   }
 </script>
@@ -54,6 +76,12 @@
   cursor: pointer;
   flex-shrink: 0;
 
+  &:focus-visible{
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:hover,
   &.active{
     background: rgba($color-gray-8, .3);
@@ -89,6 +117,12 @@
   min-width: 16px;
   cursor: pointer;
 
+  &:focus-visible{
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   .icon{
     position: absolute;
     left: -2px;
@@ -121,6 +155,12 @@
   cursor: pointer;
   position: relative;
 
+  &:focus-visible{
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:before{
     content: "";
     width: 20px;
@@ -133,7 +173,7 @@
     background: rgba($color-gray-6, .05);
   }
 
-  &.active{    
+  &.active{
     &:before{
       transform: rotate(180deg);
     }

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

@@ -11,6 +11,9 @@
       sizeClass
     ]"
     :disabled="disabled"
+    :aria-disabled="disabled || unreactive"
+    :aria-expanded="active"
+    :aria-busy="loading"
     @click="$emit('click', $event)"
     @mouseover="$emit('mouseover', $event)"
     @mouseleave="$emit('mouseleave', $event)">
@@ -18,15 +21,18 @@
     <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <div v-if="label != null" class="button-label">{{ label }}</div>
     <div v-if="chevron" class="chevron" :class="active ? 'expand' : ''" />
+    <ecs-focus-ring />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsFocusRing
     },
 
     props: {
@@ -124,6 +130,12 @@
   z-index: 1;
   flex-shrink: 0;
 
+  &:focus-visible{
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &-md{
     font-size: $type-scale-3-font-size;
     padding: 1px;

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

@@ -1,43 +1,56 @@
 <template>
-  <a v-if="href" :href="href" :target="target" class="ecs-toolbar-button"
-          :class="[
-            iconClass,
-            active ? 'active' : '',
-            loading ? 'loading' : '',
-            activeHighlight ? 'active-highlight' : '',
-            dropdown ? 'ecs-toolbar-button-dropdown' : '',
-            dropdownClass]"
-            @click="$emit('click', $event)">
+  <a v-if="href" @click="$emit('click', $event)"
+    :href="href"
+    :target="target"
+    role="button"
+    :aria-expanded="active && dropdown"
+    :aria-busy="loading"
+    :aria-label="ariaLabel"
+    class="ecs-toolbar-button"
+    :class="[
+      iconClass,
+      active ? 'active' : '',
+      loading ? 'loading' : '',
+      activeHighlight ? 'active-highlight' : '',
+      dropdown ? 'ecs-toolbar-button-dropdown' : '',
+      dropdownClass]">
 
     <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
     <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-focus-ring />
   </a>
 
-  <button v-else class="ecs-toolbar-button"
-          :class="[
-            iconClass,
-            active ? 'active' : '',
-            loading ? 'loading' : '',
-            activeHighlight ? 'active-highlight' : '',
-            dropdown ? 'ecs-toolbar-button-dropdown' : '',
-            dropdownClass]"
-            @click="$emit('click', $event)">
+  <button v-else @click="$emit('click', $event)"
+    :aria-expanded="active && dropdown"
+    :aria-busy="loading"
+    :aria-label="ariaLabel"
+    class="ecs-toolbar-button"
+    :class="[
+      iconClass,
+      active ? 'active' : '',
+      loading ? 'loading' : '',
+      activeHighlight ? 'active-highlight' : '',
+      dropdown ? 'ecs-toolbar-button-dropdown' : '',
+      dropdownClass]">
 
     <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
     <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-focus-ring />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsFocusRing
     },
 
     props: {
@@ -101,6 +114,10 @@
       badgeColor: {
         type: String,
         default: '#FF4B62'
+      },
+      /** Sets the aria-label attribute. Required for buttons that only contain an icon. */
+      ariaLabel: {
+        type: String
       }
     },
 
@@ -136,6 +153,12 @@
         if (this.dropdown && !!this.$slots.default)
           return `ecs-toolbar-button-dropdown-text`
       }
+    },
+
+    mounted() {
+      if (this.$slots.default === undefined && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
+        console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
+      }
     }
   }
 </script>
@@ -167,6 +190,14 @@
     z-index: 1;
   }
 
+  &:focus-visible{
+    z-index: 1;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:hover{
     border: 1px solid rgba($color-gray-8, .25);
     box-shadow: 0 1px 2px rgba($color-gray-8, .1);

package/src/components/button-toolbar-icon/button-toolbar-icon.vue

@@ -1,23 +1,28 @@
 <template>
-  <button class="ecs-toolbar-icon-button"
-          :class="[
-            refresh ? 'refreshing' : '',
-            active ? 'active' : '',
-            loading ? 'loading' : ''
-          ]" @click="$emit('click', $event)">
+  <button @click="$emit('click', $event)"
+    :aria-busy="refresh || loading"
+    :aria-label="ariaLabel"
+    class="ecs-toolbar-icon-button"
+    :class="[
+      refresh ? 'refreshing' : '',
+      active ? 'active' : '',
+      loading ? 'loading' : ''
+    ]">
     <ecs-icon :type="icon" />
     <span v-if="hasBadge" class="badge" />
     <div class="sub-icon">
       <ecs-icon v-if="subIcon" :type="subIcon" size="14" />
     </div>
+    <ecs-focus-ring />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
-    components: { EcsIcon },
+    components: { EcsIcon, EcsFocusRing },
 
     props: {
       /** The icon type of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note that only icons prefixed with `toolbar-` should be used here. */
@@ -48,6 +53,11 @@
       hasBadge: {
         type: Boolean,
         default: false
+      },
+      /** Sets the aria-label attribute to improve accessibility. */
+      ariaLabel: {
+        type: String,
+        required: true
       }
     }
   }
@@ -71,6 +81,12 @@
   justify-content: center;
   flex-shrink: 0;
 
+  &:focus-visible{    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:after{
     content: "";
     position: absolute;

package/src/components/checkbox/checkbox.vue

@@ -1,7 +1,6 @@
 <template>
   <ecs-form-check :class="[
     inline ? `ecs-form-check-inline` : '',
-    disabled ? `disabled` : '',
     $slots.default ? '' : 'stand-alone']">
 
     <input

package/src/components/collapse/collapse.vue

@@ -6,19 +6,30 @@
                headlineIndentation]">
 
     <div class="wrap">
-      <ecs-button v-if="removable" @click="$emit('remove', id)" type="secondary" icon-only icon="minus" size="sml" class="remove-button" :class="removeButtonIndentation" :title="removableTooltip" />
-
-      <h3 class="ecs-collapsable-headline"
-          :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', isVisible ? '' : 'collapsed']"
-          @click="toggleCollapse">
+      <ecs-button v-if="removable" @click="$emit('remove', id)" type="secondary" icon-only icon="minus" size="sml" class="remove-button" :class="removeButtonIndentation" :title="removableTooltip" :aria-label="removableTooltip" />
+
+      <h3
+        @click="toggleCollapse"
+        @keydown.space.prevent="toggleCollapse"
+        role="button"
+        class="ecs-collapsable-headline"
+        tabindex="0"
+        :aria-expanded="isVisible ? 'true' : 'false'"
+        :aria-controls="`collapse-${this.id}`"
+        :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', isVisible ? '' : 'collapsed']">
           {{title}}
+          <ecs-focus-ring :inset="0" :radius="0" />
           <div v-if="$slots.controls" class="ecs-collapsable-headline-controls">
             <slot name="controls"></slot>
           </div>
       </h3>
     </div>
     
-    <div :class="isVisible ? 'collapse-show' : 'collapse-hide'" :id="`collapse-${ this.id }`" class="collapse">
+    <div
+      :class="isVisible ? 'collapse-show' : 'collapse-hide'"
+      :id="`collapse-${ this.id }`"
+      class="collapse"
+      :aria-hidden="isVisible ? 'false' : 'true'">
       <div class="ecs-collapsable-content" :class="contentPaddingClass">
         <slot></slot>
       </div>
@@ -28,9 +39,10 @@
 
 <script>
 import EcsButton from '../button/button'
+import EcsFocusRing from '../mixins/focus-ring'
 
 export default {
-  components: { EcsButton },
+  components: { EcsButton, EcsFocusRing },
 
   props: {
     /** Unique ID, is required to handle persist states. */
@@ -202,6 +214,15 @@ export default {
     user-select: none;
     flex: 1;
 
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
     &:after{
       content: "";
       position: absolute;

package/src/components/collection-control/collection-control.vue

@@ -4,10 +4,20 @@
       isVisible || nonInteractive ? '' : 'collapsed',
       size
     ]">
-    <div @click="toggleCollapse" class="ecs-collection-control-header" :class="[
+    <div
+      @click="toggleCollapse"
+      @keydown.enter.prevent="toggleCollapse"
+      @keydown.space.prevent="toggleCollapse"
+      class="ecs-collection-control-header"
+      :class="[
       isVisible || nonInteractive ? '' : 'collapsed',
       nonInteractive ? '' : 'interactive',
-      ]">
+      ]"
+      :tabindex="nonInteractive ? '-1' : '0'"
+      :role="nonInteractive ? false : 'button'"
+      :aria-expanded="nonInteractive ? false : isVisible"
+      :aria-controls="nonInteractive ? false : expandId">
+      <ecs-focus-ring />
       <ecs-icon v-if="icon" :type="icon" color="#858E9E" :size="iconSize" />
       <div class="description" v-if="label">{{ label }}</div>
       <div class="collection"
@@ -17,7 +27,11 @@
         <span v-for="item in collection" :key="item.name" v-if="item.value">{{ item.name }}</span>
       </div>
     </div>
-    <div :class="isVisible || nonInteractive ? 'collapse-show' : 'collapse-hide'" class="collapse">
+    <div
+      :class="isVisible || nonInteractive ? 'collapse-show' : 'collapse-hide'"
+      class="collapse"
+      :id="nonInteractive ? false : expandId"
+      :aria-hidden="isVisible ? 'false' : 'true'">
       <div class="ecs-collection-control-list scrollbar scrollbar-sml" :style="listMaxHeight">
         <slot></slot>
       </div>
@@ -27,9 +41,13 @@
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
+  import { uniqueIdMixin } from '../mixins/unique-id'
 
   export default {
-    components: { EcsIcon },
+    components: { EcsIcon, EcsFocusRing },
+    mixins: [uniqueIdMixin],
+
     props: {
       /** Icon representing the type of selection. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
@@ -74,7 +92,8 @@
 
     data() {
       return {
-        isVisible: this.visible
+        isVisible: this.visible,
+        expandId: ''
       }
     },
 
@@ -95,8 +114,9 @@
 
     methods: {
       toggleCollapse(){
-        this.isVisible = !this.isVisible
-        this.$emit('toggled', this.id, this.isVisible)
+        if(!this.nonInteractive)
+          this.isVisible = !this.isVisible
+          this.$emit('toggled', this.id, this.isVisible)
       },
 
       toggleTooltip() {
@@ -108,6 +128,10 @@
       visible(){
         this.isVisible = this.visible
       }
+    },
+
+    created() {
+      this.expandId = this.generateUniqueId()
     }
   }
 </script>
@@ -159,6 +183,15 @@
     transition: .2s;
     user-select: none;
 
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
+
     &.interactive{
       cursor: pointer;
     }

package/src/components/comment/comment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-comment">
+  <div class="ecs-comment" role="comment" :aria-busy="loading">
     <div class="ecs-comment-header">
       <div class="ecs-comment-autor">
         <ecs-skeleton-loader v-if="loading" type="circle" :width="32" :height="32" />