@everchron/ec-shards 6.2.2 → 7.0.0

package/src/components/tab/tab.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="ecs-tab-pane" :class="[ show ? 'show' : '', flex ? 'ecs-tab-pane-flex' :'', directionClass ]">
+  <div
+    class="ecs-tab-pane"
+    :class="[ show ? 'show' : '', flex ? 'ecs-tab-pane-flex' :'', directionClass ]"
+    role="tabpanel"
+    :aria-labelledby="ariaLabeledBy">
     <slot></slot>
   </div>
 </template>
@@ -22,6 +26,10 @@
         type: String,
         validator: v => ['row', 'row-reverse', 'column', 'column-reverse'].includes(v),
         default: "row"
+      },
+      /** Sets the aria-labeled-by attribute, which should match the ID of the tab button that controls this tab panel. */
+      ariaLabeledBy: {
+        type: String
       }
     },
 
@@ -29,7 +37,13 @@
       directionClass() {
         if (this.flex)
           return `ecs-tab-pane-flex-${this.flexDirection}`
-      },
+      }
+    },
+
+    mounted() {
+      if (!this.ariaLabeledBy || this.ariaLabeledBy.trim() === '') {
+        console.warn('Warning: ariaLabeledBy must be provided on tab panels, to improve accessibility.');
+      }
     }
   }
 </script>

package/src/components/tab-bar/tab-bar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-tab-bar" :class="[
+  <div class="ecs-tab-bar" role="tablist" :class="[
       typeClass,
       directionClass
       ]"

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

@@ -5,22 +5,29 @@
       show ? `show` : '',
       badge ? `ecs-tab-button-badge` : '']"
     :disabled="disabled"
+    :aria-selected="show ? 'true' : 'false'"
+    :aria-controls="ariaControls"
+    role="tab"
+    ref="tabButton"
     @click="handleClick">
 
     <ecs-icon v-if="icon" :type="icon" />
     <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" size="16" />
     <slot></slot>
     <span v-if="shortcut" class="shortcut">{{ shortcut }}</span>
+    <ecs-focus-ring :inset="0" />
     <span class="hover" />
   </button>
 </template>
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsFocusRing
     },
 
     props: {
@@ -55,6 +62,10 @@
       /** Adds a shortcut label to the tab button. Should only be used with `modal` tab bar variant. */
       shortcut: {
         type: String
+      },
+      /** The ID of the tab panel that is controlled by this button. Always pass an ID to improve accessibility. */
+      ariaControls: {
+        type: String
       }
     },
 
@@ -62,9 +73,49 @@
 
     },
 
+    mounted() {
+      const button = this.$refs.tabButton;
+      button.addEventListener('keydown', this.handleKeyDown)
+
+      if (!this.ariaControls || this.ariaControls.trim() === '') {
+        console.warn('Warning: ariaControls must be provided on tab buttons, to improve accessibility.');
+      }
+    },
+
+    beforeUnmount() {
+      const button = this.$refs.tabButton;
+      button.removeEventListener('keydown', this.handleKeyDown)
+    },
+
     methods: {
       handleClick (e) {
         this.$emit('click', e)
+      },
+
+      handleKeyDown(e) {
+        const code = e.keyCode;
+
+        if (code === 37 || code === 38) { // left or up arrow
+          e.preventDefault();
+          const parent = this.$el.parentNode;
+          const children = parent.children;
+          const index = Array.prototype.indexOf.call(children, this.$el);
+          const prevButton = children[index - 1];
+          if (prevButton) {
+            prevButton.focus();
+            prevButton.click();
+          }
+        } else if (code === 39 || code === 40) { // right or down arrow
+          e.preventDefault();
+          const parent = this.$el.parentNode;
+          const children = parent.children;
+          const index = Array.prototype.indexOf.call(children, this.$el);
+          const nextButton = children[index + 1];
+          if (nextButton) {
+            nextButton.focus();
+            nextButton.click();
+          }
+        }
       }
     }
   }
@@ -79,6 +130,15 @@
   position: relative;
   cursor: pointer;
 
+  &:focus-visible{
+    z-index: 1;
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &:after{
     content: "";
     width: 6px;

package/src/components/tabs/tabs.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="ecs-tab-content" :class="[fill ? 'ecs-tab-content-fill' : '']">
+  <div class="ecs-tab-content"
+    :class="[fill ? 'ecs-tab-content-fill' : '']">
     <slot></slot>
   </div>
 </template>

package/src/components/tag/tag.vue

@@ -1,24 +1,30 @@
 <template>
   <span class="ecs-tag"
+    @click="handleClick"
     :class="[
       typeClass,
       active ? `active` : '',
       hover ? `hover` : '',
       loading ? `loading` : ''
       ]"
-      @click="handleClick">
+    :role="hover ? 'button' : false"
+    :tabindex="hover ? '0' : '-1'"
+    :aria-busy="loading"
+    >
 
     <slot></slot>
     <span class="count" v-if="count">{{count}}</span>
     <ecs-skeleton-loader v-if="loading" type="single" :width="100" style="width: calc(100% - 20px)" />
+    <ecs-focus-ring />
   </span>
 </template>
 
 <script>
   import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+  import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
-    components: { EcsSkeletonLoader },
+    components: { EcsSkeletonLoader, EcsFocusRing },
 
     props: {
       /** Determines the visual style of the tag. */
@@ -87,11 +93,17 @@
   transition: .2s;
   display: inline-block;
   position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 
+  &:focus-visible{
+    outline: none;
+    z-index: 1;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &.hover,
   &.active{
     cursor: pointer;

package/src/components/tag-cloud/tag-cloud.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-tag-cloud d-flex flex-wrap">
+  <div class="ecs-tag-cloud" role="list">
     <slot></slot>
   </div>
 </template>
@@ -7,6 +7,8 @@
 <style lang="scss" scoped>
 .ecs-tag-cloud{
   margin-bottom: -6px;
+  display: flex;
+  flex-wrap: wrap;
 
   .ecs-tag{
     margin: 0 6px 6px 0;

package/src/components/toast/toast.vue

@@ -1,14 +1,19 @@
 <template>
-  <div class="ecs-toast" :class="typeClass">
+  <div class="ecs-toast" :class="typeClass" aria-atomic="true" role="alert" aria-live="assertive">
     <slot></slot>
     <button @click="$emit('action')" class="ecs-toast-action" v-if="button">
       {{button}}
+      <ecs-focus-ring :inset="0" :radius="6" />
     </button>
   </div>
 </template>
 
 <script>
+  import EcsFocusRing from '../mixins/focus-ring'
+
   export default {
+    components: { EcsFocusRing },
+
     props: {
       /** Determines the visual theme of the toast message. */
       theme: {
@@ -44,7 +49,7 @@
   background: rgba($color-gray-13, .94);
   color: #FFF;
   box-shadow: 0 1px 3px rgba($color-gray-13, .2);
-  border-radius: $border-radius-small;
+  border-radius: $border-radius-medium;
   padding: 14px 16px;
   font-size: $type-scale-3-font-size;
   margin-bottom: 10px;
@@ -60,9 +65,10 @@
     color: $color-blue-3;
     text-transform: uppercase;
     margin: -10px -10px -10px 30px;
-    border-radius: $border-radius-x-small;
+    border-radius: $border-radius-small;
     transition: .2s;
     padding: 10px;
+    position: relative;
 
     &:hover{
       color: $color-blue-2;
@@ -72,6 +78,15 @@
       color: $color-blue-2;
       background: rgba(#FFF, .1);
     }
+
+    &:focus-visible{
+      z-index: 1;
+      outline: none;
+      
+      .ecs-focus-ring{
+        display: block;
+      }
+    }
   }
 
   &.success{

package/src/components/toasts/toasts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-toasts">
+  <div class="ecs-toasts" aria-live="polite">
     <transition-group name="transition-toast">
       <slot></slot>
     </transition-group>

package/src/components/toolbar/toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-toolbar">
+  <div class="ecs-toolbar" role="toolbar" aria-label="Main">
     <slot></slot>
   </div>
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-  <div @click="$emit('click', $event)" class="ecs-transcript-state" :class="[interactive ? 'interactive' : '']">
+  <div @click="$emit('click', $event)" class="ecs-transcript-state" :class="[interactive ? 'interactive' : '']" :aria-busy="state == 'loading'">
     <ecs-icon type="toolbar-transcript" color="#929AA9" />
     <div v-if="state =='healthy'" class="healthy" />
     <div v-if="state =='repairing'" class="repairing" />

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

@@ -1,18 +1,27 @@
 <template>
   <div>
-    <div class="ecs-tree-view-entry"
-        :class="[
-                  selectable ? 'selectable' : '',
-                  draggable ? 'draggable' : '',
-                  large ? 'ecs-tree-view-entry-lg' : '',
-                  actionsOnHover ? 'actions-hover' : '',
-                  stateClass
-                ]">
+    <div 
+      class="ecs-tree-view-entry"
+      role="treeitem"
+      :tabindex="isSelectable ? '0' : '-1'"
+      @keydown.up.prevent="focusPrevious"
+      @keydown.down.prevent="focusNext"
+      :class="[
+                selectable ? 'selectable' : '',
+                draggable ? 'draggable' : '',
+                large ? 'ecs-tree-view-entry-lg' : '',
+                actionsOnHover ? 'actions-hover' : '',
+                stateClass
+              ]">
+      <ecs-focus-ring v-if="isSelectable" />
 
       <ecs-button-collapse
         v-if="$slots.collapse"
         :type="collapseButton"
         :collapsed="!isVisible"
+        :aria-controls="expandId"
+        :aria-expanded="isVisible ? 'true' : 'false'"
+        :aria-label="isVisible ? 'Collapse' : 'Expand'"
         @click="toggleCollapse" />
 
       <ecs-icon v-if="icon" :type="icon" :color="iconColor" :size="iconSize" />
@@ -33,7 +42,10 @@
         <slot name="actions"></slot>
       </div>
     </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>
@@ -44,9 +56,12 @@
   import EcsIcon from '../icon/icon'
   import EcsStates from '../states/states'
   import EcsButtonCollapse from '../button-collapse/button-collapse'
+  import EcsFocusRing from '../mixins/focus-ring'
+  import { uniqueIdMixin } from '../mixins/unique-id'
 
   export default {
-    components: { EcsIcon, EcsStates, EcsButtonCollapse },
+    components: { EcsIcon, EcsStates, EcsButtonCollapse, EcsFocusRing },
+    mixins: [uniqueIdMixin],
 
     props: {
       id: String,
@@ -100,7 +115,8 @@
 
     data () {
       return {
-        isVisible: this.visible
+        isVisible: this.visible,
+        expandId: ''
       }
     },
 
@@ -125,6 +141,10 @@
         if (this.state && this.state !== '')
           return `ecs-state-${this.state}`
         return this.state
+      },
+      isSelectable(){
+        if(this.state == 'hover' || this.selectable || this.draggable)
+          return true
       }
     },
 
@@ -132,6 +152,38 @@
       toggleCollapse(){
         this.isVisible = !this.isVisible
         this.$emit('toggled', { id: this.id, isExpanded: this.isVisible })
+      },
+
+      focusNext() {
+        const element = this.$el;
+        let nextElement = element.nextElementSibling;
+
+        while (nextElement) {
+          const child = nextElement.querySelector('.ecs-tree-view-entry');
+
+          if (child) {
+            child.focus();
+            return;
+          }
+
+          nextElement = nextElement.nextElementSibling;
+        }
+      },
+
+      focusPrevious() {
+        const element = this.$el;
+        let prevElement = element.previousElementSibling;
+
+        while (prevElement) {
+          const child = prevElement.querySelector('.ecs-tree-view-entry');
+
+          if (child) {
+            child.focus();
+            return;
+          }
+
+          prevElement = prevElement.previousElementSibling;
+        }
       }
     },
 
@@ -139,6 +191,10 @@
       visible(){
         this.isVisible = this.visible
       }
+    },
+
+    created() {
+      this.expandId = this.generateUniqueId()
     }
   }
 </script>
@@ -160,6 +216,15 @@
   transition: .1s;
   position: relative;
 
+  &:focus-visible{
+    z-index: 1;
+    outline: none;
+    
+    .ecs-focus-ring{
+      display: block;
+    }
+  }
+
   &-lg{
     padding-top: 3px;
     padding-bottom: 3px;
@@ -219,7 +284,7 @@
 
   .ecs-form-check{
     margin-bottom: 0;
-    padding-left: 2px;
+    margin-left: 2px;
     flex: 1;
 
     &-label{

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-tree-view-list" :id="id">
+  <div class="ecs-tree-view-list" :id="id" :role="role">
     <slot></slot>
   </div>
 </template>
@@ -10,6 +10,12 @@
       /** Optional unique ID for the list. */
       id: {
         type: String
+      },
+      /** Sets the role  */
+      role: {
+        type: String,
+        validator: v => ['tree', 'group'].includes(v),
+        default: 'tree'
       }
     }
   }

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,14 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 7.0.0 (15 May 2023)
+
+### Features
+
+- All color contrasts are now fully ay11 compliant
+- All interactive components are accessible by keyboard
+- All components have ay11 compliant focus states, roles, and aria attributes
+
 ## Version 6.2.2 (15 May 2023)
 
 ### Features

package/src/stories/button/button.stories.js

@@ -50,13 +50,13 @@ export const iconOnly = () => ({
   methods: { action: action('clicked') },
   template: `
             <main>
-              <ecs-button @click="action" icon-only icon="add-plus" type="primary"></ecs-button>
-              <ecs-button @click="action" icon-only icon="add-plus" type="secondary"></ecs-button>
-              <ecs-button @click="action" icon-only icon="add-plus" type="danger"></ecs-button>
-              <ecs-button @click="action" icon-only icon="add-plus" type="danger-vibrant"></ecs-button>
-              <ecs-button @click="action" icon-only icon="add-plus" type="warning"></ecs-button>
-              <ecs-button @click="action" icon-only icon="add-plus" type="create"></ecs-button>
-              <ecs-button @click="action" icon-only icon="add-plus" type="vibrant"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" aria-label="Add" type="primary"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" aria-label="Add" type="secondary"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" aria-label="Add" type="danger"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" aria-label="Add" type="danger-vibrant"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" aria-label="Add" type="warning"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" aria-label="Add" type="create"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" aria-label="Add" type="vibrant"></ecs-button>
             </main>
             `,
 });

package/src/stories/button-more/button-more.stories.js

@@ -8,26 +8,26 @@ export default {
 export const dropdown = () => ({
   components: { EcsButtonMore },
   template: `<main>
-              <ecs-button-more></ecs-button-more>
-              <ecs-button-more active></ecs-button-more>
-              <ecs-button-more disabled></ecs-button-more>
+              <ecs-button-more aria-label="Actions"></ecs-button-more>
+              <ecs-button-more aria-label="Actions" active></ecs-button-more>
+              <ecs-button-more aria-label="Actions" disabled></ecs-button-more>
             </main>`,
 });
 
 export const ellipse = () => ({
   components: { EcsButtonMore },
   template: `<main>
-              <ecs-button-more type="ellipsis"></ecs-button-more>
-              <ecs-button-more type="ellipsis" active></ecs-button-more>
-              <ecs-button-more type="ellipsis" disabled></ecs-button-more>
+              <ecs-button-more aria-label="Expand" type="ellipsis"></ecs-button-more>
+              <ecs-button-more aria-label="Expand" type="ellipsis" active></ecs-button-more>
+              <ecs-button-more aria-label="Expand" type="ellipsis" disabled></ecs-button-more>
             </main>`,
 });
 
 export const expand = () => ({
   components: { EcsButtonMore },
   template: `<main>
-              <ecs-button-more type="expand" class="mb-2"></ecs-button-more>
-              <ecs-button-more type="expand" class="mb-2" active></ecs-button-more>
+              <ecs-button-more type="expand" aria-label="Show more" class="mb-2"></ecs-button-more>
+              <ecs-button-more type="expand" aria-label="Show more" class="mb-2" active></ecs-button-more>
               <ecs-button-more type="expand" class="mb-2">Show More</ecs-button-more>
               <ecs-button-more type="expand" class="mb-2" active>Show Less</ecs-button-more>
             </main>`,

package/src/stories/button-toolbar/button-toolbar.stories.js

@@ -8,7 +8,7 @@ export default {
 
 export const regular = () => ({
   components: { EcsButtonToolbar },
-  template: `<ecs-button-toolbar icon="marker"></ecs-button-toolbar>`,
+  template: `<ecs-button-toolbar icon="marker" aria-label="Mark Text"></ecs-button-toolbar>`,
 });
 
 export const regularText = () => ({
@@ -30,9 +30,9 @@ export const dropdown = () => ({
 export const group = () => ({
   components: { EcsButtonToolbar, EcsButtonToolbarGroup },
   template: `<ecs-button-toolbar-group>
-                <ecs-button-toolbar icon="marker" active />
-                <ecs-button-toolbar icon="rectangle" />
-                <ecs-button-toolbar icon="rectangle" active-highlight />
-                <ecs-button-toolbar href="https://google.com" target="_blank" icon="delete" badge />
+                <ecs-button-toolbar icon="marker" active aria-label="Mark Text" />
+                <ecs-button-toolbar icon="rectangle" aria-label="Mark Rectangle" />
+                <ecs-button-toolbar icon="rectangle" active-highlight aria-label="Mark Rectangle" />
+                <ecs-button-toolbar href="https://google.com" target="_blank" icon="delete" badge aria-label="Delete" />
               </ecs-button-toolbar-group>`,
 });

package/src/stories/button-toolbar-icon/button-toolbar-icon.stories.js

@@ -8,17 +8,17 @@ export default {
 export const regular = () => ({
   components: { EcsButtonToolbarIcon },
   template: `<main>
-              <ecs-button-toolbar-icon icon="toolbar-sort" />
-              <ecs-button-toolbar-icon active icon="toolbar-sort" />
-              <ecs-button-toolbar-icon loading icon="toolbar-sort" />
-              <ecs-button-toolbar-icon disabled icon="toolbar-sort" />
-              <ecs-button-toolbar-icon icon="toolbar-cards" has-badge />
+              <ecs-button-toolbar-icon aria-label="Sort" icon="toolbar-sort" />
+              <ecs-button-toolbar-icon aria-label="Sort" active icon="toolbar-sort" />
+              <ecs-button-toolbar-icon aria-label="Sort" loading icon="toolbar-sort" />
+              <ecs-button-toolbar-icon aria-label="Sort" disabled icon="toolbar-sort" />
+              <ecs-button-toolbar-icon aria-label="Sort" icon="toolbar-cards" has-badge />
             </main>`,
 });
 
 export const subIcon = () => ({
   components: { EcsButtonToolbarIcon },
   template: `<main>
-              <ecs-button-toolbar-icon icon="toolbar-refresh" sub-icon="mail" />
+              <ecs-button-toolbar-icon aria-label="Refresh" icon="toolbar-refresh" sub-icon="mail" />
             </main>`,
 });

package/src/stories/popover-list/popover-list.stories.js

@@ -8,10 +8,15 @@ export default {
 
 export const popoverList = () => ({
   components: { EcsPopoverList, EcsPopoverListItem },
-  template: `<ecs-popover-list>
+  template: `<div><ecs-popover-list>
                 <ecs-popover-list-item>Label</ecs-popover-list-item>
                 <ecs-popover-list-item>Label</ecs-popover-list-item>
-              </ecs-popover-list>`,
+              </ecs-popover-list><ecs-popover-list>
+                <ecs-popover-list-item>Label</ecs-popover-list-item>
+                <ecs-popover-list-item>Label</ecs-popover-list-item>
+                <ecs-popover-list-item>Label</ecs-popover-list-item>
+                <ecs-popover-list-item>Label</ecs-popover-list-item>
+              </ecs-popover-list></div>`,
 });
 
 export const popoverListInner = () => ({

package/src/stories/sortbutton/sortbutton.stories.js

@@ -9,8 +9,8 @@ export const sortbutton = () => ({
   components: { EcsSortbutton },
   template: `<div>
                 <ecs-sortbutton>Null</ecs-sortbutton>
-                <ecs-sortbutton sort="desc">Descending</ecs-sortbutton>
-                <ecs-sortbutton sort="asc">Ascending</ecs-sortbutton>
+                <ecs-sortbutton sort="descending">Descending</ecs-sortbutton>
+                <ecs-sortbutton sort="ascending">Ascending</ecs-sortbutton>
               </div>`,
 });
 
@@ -18,7 +18,7 @@ export const sortbuttonInline = () => ({
   components: { EcsSortbutton },
   template: `<main>
                 <ecs-sortbutton inline>Null</ecs-sortbutton>
-                <ecs-sortbutton inline sort="desc">Descending</ecs-sortbutton>
-                <ecs-sortbutton inline sort="asc">Ascending</ecs-sortbutton>
+                <ecs-sortbutton inline sort="descending">Descending</ecs-sortbutton>
+                <ecs-sortbutton inline sort="ascending">Ascending</ecs-sortbutton>
               </main>`,
 });