Chip accessibility

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of VueJS components with minimal dependencies. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

src/app/views/user-input/chip/Chip.ts

@@ -16,6 +16,11 @@ export default class Chip extends Vue {
 
   private headline = 'Removable chips for tagging and inputs';
 
+  private data = {
+    click: () => console.log('clicked!'),
+    remove: () => console.log('removed!'),
+  };
+
   private chipSizes = `<div class="neon-vertically-spaced">
   <neon-chip label="Small" size="s" />
   <neon-chip label="Medium" size="m" />
@@ -34,8 +39,8 @@ export default class Chip extends Vue {
 </div>`;
 
   private chipActions = `<div class="neon-vertically-spaced">
-  <neon-chip label="Clickable" color="info" />
-  <neon-chip action="remove" label="Removable" color="info" />
+  <neon-chip label="Clickable" action="click" color="info" @click="click" />
+  <neon-chip action="remove" label="Removable" color="info" @close="remove" />
   <neon-chip :disabled="true" action="remove" label="Disabled" color="info" />
 </div>`;
 
@@ -55,6 +60,7 @@ export default class Chip extends Vue {
     {
       title: 'Chip actions',
       template: this.chipActions,
+      data: this.data,
     },
     {
       title: 'Chip with icon',

src/components/user-input/chip/NeonChip.ts

@@ -28,6 +28,7 @@ export default class NeonChip extends Vue {
   };
 
   private open = true;
+  private active = false;
   /**
    * The chip label
    */
@@ -88,32 +89,46 @@ export default class NeonChip extends Vue {
     }
   }
 
-  private keyDown(event: KeyboardEvent) {
-    if (!this.disabled && document.activeElement === this.$refs.chip) {
-      if (event.code === 'Escape') {
-        this.$refs.chip.blur();
+  private get role() {
+    if (!this.disabled) {
+      switch (this.action) {
+        case NeonChipAction.Remove:
+          return 'button';
+        case NeonChipAction.Click:
+          return 'link';
       }
+    }
+  }
+
+  private keyUp() {
+    if (!this.disabled && document.activeElement === this.$refs.chip) {
+      this.active = false;
+    }
+  }
 
+  private keyDown(event: KeyboardEvent) {
+    if (!this.disabled && document.activeElement === this.$refs.chip) {
       switch (this.action) {
         case NeonChipAction.Remove:
           switch (event.code) {
             case 'Space':
             case 'Enter':
             case 'Backspace':
             case 'Delete':
-              event.stopPropagation();
               event.preventDefault();
               this.clicked();
+              event.stopPropagation();
               return false;
           }
           return true;
         case NeonChipAction.Click:
           switch (event.code) {
             case 'Space':
             case 'Enter':
-              event.stopPropagation();
+              this.active = true;
               event.preventDefault();
               this.clicked();
+              event.stopPropagation();
               return false;
           }
           return true;

src/components/user-input/chip/NeonChip.vue

@@ -7,11 +7,13 @@
         `neon-chip--${size}`,
         `neon-chip--${color}`,
         `neon-chip--${action}`,
-        { 'neon-chip--disabled': disabled },
+        { 'neon-chip--disabled': disabled, 'neon-chip--active': active },
       ]"
+      :role="role"
       @click="clicked()"
       @keydown="keyDown"
-      :tabindex="!disabled && action !== 'none' ? 0 : undefined"
+      @keyup="keyUp"
+      :tabindex="!disabled ? 0 : undefined"
       ref="chip"
     >
       <neon-icon v-if="icon" :name="icon" class="neon-chip__icon" :color="color" />

src/sass/_chip.scss

@@ -56,7 +56,8 @@
   &:not(.neon-chip--disabled) {
     cursor: pointer;
 
-    &:active {
+    &:active,
+    &.neon-chip--active {
       transform: scale(0.95);
     }
   }