From 849163feb8609babe78df3e0f0a41ae6b9749dd4 Mon Sep 17 00:00:00 2001
From: aotearoan <andrew@aotearoan.com>
Date: Sun, 1 Nov 2020 00:23:15 +0100
Subject: [PATCH] Chip accessibility

---
 package.json                                |  2 +-
 src/app/views/user-input/chip/Chip.ts       | 10 ++++++--
 src/components/user-input/chip/NeonChip.ts  | 27 ++++++++++++++++-----
 src/components/user-input/chip/NeonChip.vue |  6 +++--
 src/sass/_chip.scss                         |  3 ++-
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index e7886e70..37915968 100644
--- a/package.json
+++ b/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": [
diff --git a/src/app/views/user-input/chip/Chip.ts b/src/app/views/user-input/chip/Chip.ts
index a4fb187f..b8159f1c 100644
--- a/src/app/views/user-input/chip/Chip.ts
+++ b/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',
diff --git a/src/components/user-input/chip/NeonChip.ts b/src/components/user-input/chip/NeonChip.ts
index c536e58b..2961a27d 100644
--- a/src/components/user-input/chip/NeonChip.ts
+++ b/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,12 +89,25 @@ 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) {
@@ -101,9 +115,9 @@ export default class NeonChip extends Vue {
             case 'Enter':
             case 'Backspace':
             case 'Delete':
-              event.stopPropagation();
               event.preventDefault();
               this.clicked();
+              event.stopPropagation();
               return false;
           }
           return true;
@@ -111,9 +125,10 @@ export default class NeonChip extends Vue {
           switch (event.code) {
             case 'Space':
             case 'Enter':
-              event.stopPropagation();
+              this.active = true;
               event.preventDefault();
               this.clicked();
+              event.stopPropagation();
               return false;
           }
           return true;
diff --git a/src/components/user-input/chip/NeonChip.vue b/src/components/user-input/chip/NeonChip.vue
index c6ce0ba7..86661dfc 100644
--- a/src/components/user-input/chip/NeonChip.vue
+++ b/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" />
diff --git a/src/sass/_chip.scss b/src/sass/_chip.scss
index bb4a0262..7b66bf9b 100644
--- a/src/sass/_chip.scss
+++ b/src/sass/_chip.scss
@@ -56,7 +56,8 @@
   &:not(.neon-chip--disabled) {
     cursor: pointer;
 
-    &:active {
+    &:active,
+    &.neon-chip--active {
       transform: scale(0.95);
     }
   }