From 74cee9ff0de50127be14814fc589a28deba5f432 Mon Sep 17 00:00:00 2001
From: Tim Bochkarev <t.bochkarev@qvant.ru>
Date: Fri, 15 Jan 2021 14:36:59 +0300
Subject: [PATCH 1/6] add navigation for QCascader

---
 .../QBreadcrumbs/src/q-breadcrumbs.scss         |  4 ++++
 src/qComponents/QButton/src/q-button.scss       | 17 +++++++++++++++++
 src/qComponents/QCascader/src/QCascader.vue     | 15 ++++++++++-----
 src/qComponents/QCascader/src/QCascaderMenu.vue |  2 ++
 .../QCascader/src/q-cascader-menu.scss          |  1 +
 src/vars.scss                                   |  2 ++
 6 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/qComponents/QBreadcrumbs/src/q-breadcrumbs.scss b/src/qComponents/QBreadcrumbs/src/q-breadcrumbs.scss
index d0964fbb..c4d7fcda 100644
--- a/src/qComponents/QBreadcrumbs/src/q-breadcrumbs.scss
+++ b/src/qComponents/QBreadcrumbs/src/q-breadcrumbs.scss
@@ -30,6 +30,10 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 
+    &:focus {
+      text-decoration: underline;
+    }
+
     &_last:first-child {
       color: var(--color-primary-black);
     }
diff --git a/src/qComponents/QButton/src/q-button.scss b/src/qComponents/QButton/src/q-button.scss
index b63062b1..3540b8af 100644
--- a/src/qComponents/QButton/src/q-button.scss
+++ b/src/qComponents/QButton/src/q-button.scss
@@ -30,6 +30,7 @@
   }
 
   &:hover {
+    background-color: var(--color-primary);
     background-image: none;
     box-shadow: -1px -1px 4px rgba(var(--color-rgb-white), 0.25),
       1px 1px 4px rgba(var(--color-rgb-blue), 0.4),
@@ -76,6 +77,13 @@
   }
 
   &_theme {
+    &_primary {
+      &:focus {
+        background-color: var(--color-primary-darker);
+        background-image: none;
+      }
+    }
+
     &_secondary {
       color: var(--color-primary-blue);
       background-color: var(--color-tertiary-gray);
@@ -92,6 +100,11 @@
         outline: none;
         box-shadow: var(--box-shadow-pressed);
       }
+
+      &:focus {
+        color: var(--color-tertiary-white);
+        background-color: var(--color-primary-darker);
+      }
     }
 
     &_link {
@@ -103,6 +116,10 @@
       background-image: none;
       box-shadow: none;
 
+      &:focus {
+        text-decoration: underline;
+      }
+
       &:hover {
         color: var(--color-primary-black);
         background-color: transparent;
diff --git a/src/qComponents/QCascader/src/QCascader.vue b/src/qComponents/QCascader/src/QCascader.vue
index 795f2853..506f381f 100644
--- a/src/qComponents/QCascader/src/QCascader.vue
+++ b/src/qComponents/QCascader/src/QCascader.vue
@@ -15,11 +15,11 @@
         'q-input_focus': Boolean(popper),
         'q-input_hover': areTagsHovered
       }"
-      @focus="handleFocus"
-      @blur="handleBlur"
       @mouseenter.native="handleMouseEnter"
       @mouseleave.native="showClose = false"
-      @click="togglePopper"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keyup.esc="togglePopper"
     >
       <template slot="suffix">
         <span
@@ -419,10 +419,15 @@ export default {
 
     handleFocus(e) {
       this.$emit('focus', e);
+      if (this.popper) return;
+      this.showPopper();
     },
 
-    handleBlur(e) {
-      this.$emit('blur', e);
+    handleBlur() {
+      // console.log(document.activeElement);
+      // if (!this.popper) return;
+      // this.hidePopper();
+      // this.$emit('blur', e);
     },
 
     updateStyle() {
diff --git a/src/qComponents/QCascader/src/QCascaderMenu.vue b/src/qComponents/QCascader/src/QCascaderMenu.vue
index 6ee4ce98..5e2713fe 100644
--- a/src/qComponents/QCascader/src/QCascaderMenu.vue
+++ b/src/qComponents/QCascader/src/QCascaderMenu.vue
@@ -13,7 +13,9 @@
           v-else
           :key="key"
           :class="getNodeClass(node)"
+          :tabindex="key"
           @click="e => handleExpand(e, node)"
+          @keyup.enter="e => handleExpand(e, node)"
         >
           <q-checkbox
             v-if="cascader.multiple"
diff --git a/src/qComponents/QCascader/src/q-cascader-menu.scss b/src/qComponents/QCascader/src/q-cascader-menu.scss
index 6196f53a..51aefc0d 100644
--- a/src/qComponents/QCascader/src/q-cascader-menu.scss
+++ b/src/qComponents/QCascader/src/q-cascader-menu.scss
@@ -111,6 +111,7 @@
       }
     }
 
+    &:focus,
     &_active {
       position: relative;
       color: var(--color-primary-black);
diff --git a/src/vars.scss b/src/vars.scss
index 34b87165..0bffe702 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -20,6 +20,8 @@
   --color-tertiary-gray-ultra-dark: #c4c4c4;
   --color-tertiary-gray-ultra-darker: #adacae;
 
+  --color-primary-darker: #b83e65;
+
   --color-rgb-white: 255, 255, 255;
   --color-rgb-blue: 174, 174, 192;
   --color-rgb-gray: 29, 28, 26;

From bb364c5d6ac87950544c47d3e3eb7c58387c1cb3 Mon Sep 17 00:00:00 2001
From: Tim <darknelmail.com@mail.ru>
Date: Fri, 15 Jan 2021 18:33:11 +0300
Subject: [PATCH 2/6] wip

---
 src/qComponents/QCascader/src/QCascader.vue     | 12 ++++++++++--
 src/qComponents/QCascader/src/QCascaderMenu.vue |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/qComponents/QCascader/src/QCascader.vue b/src/qComponents/QCascader/src/QCascader.vue
index 506f381f..84a39291 100644
--- a/src/qComponents/QCascader/src/QCascader.vue
+++ b/src/qComponents/QCascader/src/QCascader.vue
@@ -19,7 +19,6 @@
       @mouseleave.native="showClose = false"
       @focus="handleFocus"
       @blur="handleBlur"
-      @keyup.esc="togglePopper"
     >
       <template slot="suffix">
         <span
@@ -329,13 +328,22 @@ export default {
     this.inputInitialHeight = input?.$el?.offsetHeight ?? DEFAULT_INPUT_HEIGHT;
 
     addResizeListener(this.$el, this.updateStyle);
+    document.addEventListener('keyup', this.handleKeyUp, true);
   },
 
   beforeDestroy() {
     removeResizeListener(this.$el, this.updateStyle);
+    document.removeEventListener('keyup', this.handleKeyUp, true);
   },
 
   methods: {
+    handleKeyUp(e) {
+      if (e.key === 'Escape') {
+        this.$refs.input.blur();
+        this.hidePopper();
+      }
+    },
+
     handleTagsHover() {
       this.areTagsHovered = true;
       this.showClose = true;
@@ -424,7 +432,7 @@ export default {
     },
 
     handleBlur() {
-      // console.log(document.activeElement);
+      console.log(document.activeElement);
       // if (!this.popper) return;
       // this.hidePopper();
       // this.$emit('blur', e);
diff --git a/src/qComponents/QCascader/src/QCascaderMenu.vue b/src/qComponents/QCascader/src/QCascaderMenu.vue
index 5e2713fe..d28b8cd5 100644
--- a/src/qComponents/QCascader/src/QCascaderMenu.vue
+++ b/src/qComponents/QCascader/src/QCascaderMenu.vue
@@ -13,7 +13,7 @@
           v-else
           :key="key"
           :class="getNodeClass(node)"
-          :tabindex="key"
+          tabindex="0"
           @click="e => handleExpand(e, node)"
           @keyup.enter="e => handleExpand(e, node)"
         >

From a72ab72441f5e3ceeb3135448e2b873fc8a911cc Mon Sep 17 00:00:00 2001
From: Tim Bochkarev <t.bochkarev@qvant.ru>
Date: Mon, 18 Jan 2021 12:23:41 +0300
Subject: [PATCH 3/6] add moe accesibility

---
 src/qComponents/QCascader/src/QCascader.vue   | 46 +++++++++++--------
 .../QCascader/src/QCascaderMenu.vue           | 10 +++-
 stories/components/QCascader.stories.js       |  1 -
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/qComponents/QCascader/src/QCascader.vue b/src/qComponents/QCascader/src/QCascader.vue
index 84a39291..a49a2b09 100644
--- a/src/qComponents/QCascader/src/QCascader.vue
+++ b/src/qComponents/QCascader/src/QCascader.vue
@@ -17,8 +17,7 @@
       }"
       @mouseenter.native="handleMouseEnter"
       @mouseleave.native="showClose = false"
-      @focus="handleFocus"
-      @blur="handleBlur"
+      @focus="handleInputFocus"
     >
       <template slot="suffix">
         <span
@@ -251,7 +250,8 @@ export default {
       inputInitialHeight: 0,
       popper: null,
       showClose: false,
-      areTagsHovered: false
+      areTagsHovered: false,
+      focus: false
     };
   },
 
@@ -338,9 +338,22 @@ export default {
 
   methods: {
     handleKeyUp(e) {
-      if (e.key === 'Escape') {
-        this.$refs.input.blur();
-        this.hidePopper();
+      if (this.focus) {
+        if (e.key === 'Escape') {
+          this.$refs.input.blur();
+          this.hidePopper();
+        }
+
+        if (e.key === 'Backspace') {
+          this.deleteTag();
+        }
+
+        if (e.key === 'Tab') {
+          if (!this.$refs.reference.contains(document.activeElement)) {
+            this.hidePopper();
+            this.focus = false;
+          }
+        }
       }
     },
 
@@ -361,9 +374,14 @@ export default {
       }
     },
 
-    deleteTag({ value }) {
+    deleteTag({ value } = {}) {
+      if (!this.checkedValues) return;
       const result = new Set(this.checkedValues);
-      result.delete(value);
+      if (value) {
+        result.delete(value);
+      } else {
+        result.delete(this.checkedValues[this.checkedValues.length - 1]);
+      }
       const payload = Array.from(result);
       this.emit(payload.length ? payload : null);
     },
@@ -425,19 +443,11 @@ export default {
       }
     },
 
-    handleFocus(e) {
+    handleInputFocus(e) {
       this.$emit('focus', e);
-      if (this.popper) return;
+      this.focus = true;
       this.showPopper();
     },
-
-    handleBlur() {
-      console.log(document.activeElement);
-      // if (!this.popper) return;
-      // this.hidePopper();
-      // this.$emit('blur', e);
-    },
-
     updateStyle() {
       const { $el, inputInitialHeight } = this;
       if (!$el) return;
diff --git a/src/qComponents/QCascader/src/QCascaderMenu.vue b/src/qComponents/QCascader/src/QCascaderMenu.vue
index d28b8cd5..6078a1cd 100644
--- a/src/qComponents/QCascader/src/QCascaderMenu.vue
+++ b/src/qComponents/QCascader/src/QCascaderMenu.vue
@@ -13,7 +13,7 @@
           v-else
           :key="key"
           :class="getNodeClass(node)"
-          tabindex="0"
+          :tabindex="getTabIndex(node)"
           @click="e => handleExpand(e, node)"
           @keyup.enter="e => handleExpand(e, node)"
         >
@@ -112,6 +112,14 @@ export default {
   },
 
   methods: {
+    getTabIndex(node) {
+      if (this.cascader.multiple && !node.children) {
+        return '-1';
+      }
+
+      return '0';
+    },
+
     getIndeterminate(node) {
       if (
         !this.cascader.checkedValues ||
diff --git a/stories/components/QCascader.stories.js b/stories/components/QCascader.stories.js
index 2f9a590e..56190bd6 100644
--- a/stories/components/QCascader.stories.js
+++ b/stories/components/QCascader.stories.js
@@ -1,4 +1,3 @@
-import { multiply } from 'lodash-es';
 import QCascader from '../../src/qComponents/QCascader';
 
 const args = {

From 727703b011b657646eebbae89958f1d2ae2b847d Mon Sep 17 00:00:00 2001
From: Tim Bochkarev <t.bochkarev@qvant.ru>
Date: Tue, 19 Jan 2021 17:13:21 +0300
Subject: [PATCH 4/6] add navigation

---
 src/qComponents/QCascader/src/QCascader.vue   | 26 +++++++-
 .../QCascader/src/QCascaderMenu.vue           | 20 ++++--
 .../QCascader/src/QCascaderPanel.vue          | 64 ++++++++++++++++++-
 .../QCascader/src/q-cascader-menu.scss        |  9 ++-
 src/qComponents/QCheckbox/src/QCheckbox.vue   | 10 ++-
 5 files changed, 117 insertions(+), 12 deletions(-)

diff --git a/src/qComponents/QCascader/src/QCascader.vue b/src/qComponents/QCascader/src/QCascader.vue
index a49a2b09..4a88eac6 100644
--- a/src/qComponents/QCascader/src/QCascader.vue
+++ b/src/qComponents/QCascader/src/QCascader.vue
@@ -11,6 +11,10 @@
       :placeholder="calcPlaceholder"
       :disabled="isDisabled"
       :validate-event="false"
+      aria-haspopup="true"
+      role="button"
+      :aria-controls="id"
+      :aria-expanded="popper"
       :class="{
         'q-input_focus': Boolean(popper),
         'q-input_hover': areTagsHovered
@@ -18,6 +22,7 @@
       @mouseenter.native="handleMouseEnter"
       @mouseleave.native="showClose = false"
       @focus="handleInputFocus"
+      @click="togglePopper"
     >
       <template slot="suffix">
         <span
@@ -251,7 +256,8 @@ export default {
       popper: null,
       showClose: false,
       areTagsHovered: false,
-      focus: false
+      focus: false,
+      id: null
     };
   },
 
@@ -323,6 +329,10 @@ export default {
     }
   },
 
+  created() {
+    this.id = `id${(+new Date()).toString(16)}`;
+  },
+
   mounted() {
     const { input } = this.$refs;
     this.inputInitialHeight = input?.$el?.offsetHeight ?? DEFAULT_INPUT_HEIGHT;
@@ -339,6 +349,13 @@ export default {
   methods: {
     handleKeyUp(e) {
       if (this.focus) {
+        if (
+          e.target.classList.contains('q-input__inner') &&
+          e.key === 'Enter'
+        ) {
+          this.togglePopper();
+        }
+
         if (e.key === 'Escape') {
           this.$refs.input.blur();
           this.hidePopper();
@@ -354,6 +371,12 @@ export default {
             this.focus = false;
           }
         }
+
+        if (
+          ['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown'].includes(e.key)
+        ) {
+          this.$refs.panel.navigateFocus(e);
+        }
       }
     },
 
@@ -446,7 +469,6 @@ export default {
     handleInputFocus(e) {
       this.$emit('focus', e);
       this.focus = true;
-      this.showPopper();
     },
     updateStyle() {
       const { $el, inputInitialHeight } = this;
diff --git a/src/qComponents/QCascader/src/QCascaderMenu.vue b/src/qComponents/QCascader/src/QCascaderMenu.vue
index 6078a1cd..2b637ac0 100644
--- a/src/qComponents/QCascader/src/QCascaderMenu.vue
+++ b/src/qComponents/QCascader/src/QCascaderMenu.vue
@@ -11,14 +11,18 @@
         <div
           v-for="(node, key) in nodes"
           v-else
+          :id="`q-cascader-node-${index}-${key}`"
           :key="key"
           :class="getNodeClass(node)"
-          :tabindex="getTabIndex(node)"
+          role="menuitem"
+          tabindex="-1"
           @click="e => handleExpand(e, node)"
-          @keyup.enter="e => handleExpand(e, node)"
+          @keyup.enter="e => handleEnterKeyUp(e, node)"
+          @keyup.right="e => handleExpand(e, node)"
         >
           <q-checkbox
             v-if="cascader.multiple"
+            input-tab-index="-1"
             :value="getChecked(node)"
             :indeterminate="getIndeterminate(node)"
             @change="isChecked => handleValueChange(node, isChecked)"
@@ -112,14 +116,15 @@ export default {
   },
 
   methods: {
-    getTabIndex(node) {
-      if (this.cascader.multiple && !node.children) {
-        return '-1';
+    handleEnterKeyUp(e, node) {
+      if (this.cascader.multiple) {
+        const checkbox = e.target.querySelector('.q-checkbox__original');
+        if (checkbox) checkbox.click();
+        return;
       }
 
-      return '0';
+      this.handleExpand(e, node);
     },
-
     getIndeterminate(node) {
       if (
         !this.cascader.checkedValues ||
@@ -231,6 +236,7 @@ export default {
     },
 
     handleExpand(e, value) {
+      if (e.key === 'ArrowRight' && !value.children) return;
       if (!value.children && !this.cascader.multiple) {
         this.cascader.emit(value.value);
       }
diff --git a/src/qComponents/QCascader/src/QCascaderPanel.vue b/src/qComponents/QCascader/src/QCascaderPanel.vue
index aa35820d..98764a54 100644
--- a/src/qComponents/QCascader/src/QCascaderPanel.vue
+++ b/src/qComponents/QCascader/src/QCascaderPanel.vue
@@ -2,8 +2,9 @@
   <div class="q-cascader-panel">
     <q-cascader-menu
       v-for="(menu, index) in menus"
-      ref="menu"
       :key="index"
+      role="menu"
+      :aria-labelledby="cascader.id"
       :index="index"
       :nodes="menu"
       @expand="handleExpand"
@@ -65,6 +66,67 @@ export default {
   },
 
   methods: {
+    navigateFocus(e) {
+      if (e.target.classList.contains('q-input__inner')) {
+        const firstNode = this.$el.querySelector('#q-cascader-node-0-0');
+        if (firstNode) {
+          firstNode.focus();
+        }
+      }
+
+      if (!e.target.classList.contains('q-cascader-node')) return;
+      const nodeText = e.target.innerText;
+      let nodeIndex;
+      let currentNodePosition;
+      this.menus.forEach((menu, menuIndex) => {
+        nodeIndex = menu.findIndex(node => node.label === nodeText);
+        if (nodeIndex > -1) {
+          currentNodePosition = [menuIndex, nodeIndex];
+        }
+      });
+
+      let nextNodePosition;
+
+      switch (e.key) {
+        case 'ArrowRight':
+          nextNodePosition = [
+            currentNodePosition[0] + 1,
+            currentNodePosition[1]
+          ];
+          break;
+        case 'ArrowLeft':
+          nextNodePosition = [
+            currentNodePosition[0] === 0 ? 0 : currentNodePosition[0] - 1,
+            currentNodePosition[1]
+          ];
+
+          break;
+
+        case 'ArrowUp':
+          nextNodePosition = [
+            currentNodePosition[0],
+            currentNodePosition[1] === 0 ? 0 : currentNodePosition[1] - 1
+          ];
+          break;
+
+        case 'ArrowDown':
+          nextNodePosition = [
+            currentNodePosition[0],
+            currentNodePosition[1] + 1
+          ];
+          break;
+        default:
+          break;
+      }
+
+      const node = this.$el.querySelector(
+        `#q-cascader-node-${nextNodePosition[0]}-${nextNodePosition[1]}`
+      );
+
+      if (node) {
+        node.focus();
+      }
+    },
     handleExpand(index, activeValue) {
       if (this.cascader.multiple && !activeValue.children) return;
       let nextLevel;
diff --git a/src/qComponents/QCascader/src/q-cascader-menu.scss b/src/qComponents/QCascader/src/q-cascader-menu.scss
index 51aefc0d..6fee60fe 100644
--- a/src/qComponents/QCascader/src/q-cascader-menu.scss
+++ b/src/qComponents/QCascader/src/q-cascader-menu.scss
@@ -115,7 +115,6 @@
     &_active {
       position: relative;
       color: var(--color-primary-black);
-      background-color: var(--color-tertiary-gray-ultra-light);
       box-shadow: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
         1px 1px 3px rgba(var(--color-rgb-blue), 0.4);
 
@@ -124,6 +123,14 @@
       }
     }
 
+    &_active {
+      background-color: var(--color-tertiary-gray-ultra-light);
+    }
+
+    &:focus {
+      background-color: var(--color-tertiary-gray);
+    }
+
     &_disabled {
       color: var(--color-opacity-gray-dark);
       cursor: not-allowed;
diff --git a/src/qComponents/QCheckbox/src/QCheckbox.vue b/src/qComponents/QCheckbox/src/QCheckbox.vue
index 6e52e619..0ba7c341 100644
--- a/src/qComponents/QCheckbox/src/QCheckbox.vue
+++ b/src/qComponents/QCheckbox/src/QCheckbox.vue
@@ -35,6 +35,7 @@
         :disabled="isDisabled"
         :value="label"
         :name="name"
+        :tabindex="inputTabIndex"
         @change="handleChange"
         @focus="focus = true"
         @blur="focus = false"
@@ -96,7 +97,14 @@ export default {
      * as native name
      */
     name: { type: String, default: '' },
-    rootTag: { type: String, default: 'label' }
+    rootTag: { type: String, default: 'label' },
+    /**
+     * as native tabIndex
+     */
+    inputTabIndex: {
+      type: String,
+      default: '0'
+    }
   },
 
   data() {

From de1a440e353bf84b4854a854cbc29e9a94b92196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=91=D0=BE=D1=87=D0=BA=D0=B0=D1=80=D0=B5=D0=B2=20=D0=A2?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=BE=D1=84=D0=B5=D0=B9?= <t.bochkarev@qvant.ru>
Date: Wed, 20 Jan 2021 14:57:47 +0300
Subject: [PATCH 5/6] fixes

---
 src/qComponents/QButton/src/q-button.scss   | 4 ++++
 src/qComponents/QCascader/src/QCascader.vue | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/qComponents/QButton/src/q-button.scss b/src/qComponents/QButton/src/q-button.scss
index 3540b8af..72f8a435 100644
--- a/src/qComponents/QButton/src/q-button.scss
+++ b/src/qComponents/QButton/src/q-button.scss
@@ -29,6 +29,10 @@
     margin-left: 16px;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:hover {
     background-color: var(--color-primary);
     background-image: none;
diff --git a/src/qComponents/QCascader/src/QCascader.vue b/src/qComponents/QCascader/src/QCascader.vue
index 4a88eac6..9a749d7f 100644
--- a/src/qComponents/QCascader/src/QCascader.vue
+++ b/src/qComponents/QCascader/src/QCascader.vue
@@ -330,7 +330,7 @@ export default {
   },
 
   created() {
-    this.id = `id${(+new Date()).toString(16)}`;
+    this.id = `id${Date.now().toString(16)}`;
   },
 
   mounted() {

From bf71f121070be2e21f139d25f21e963e1421802c Mon Sep 17 00:00:00 2001
From: Tim Bochkarev <t.bochkarev@qvant.ru>
Date: Thu, 21 Jan 2021 12:04:36 +0300
Subject: [PATCH 6/6] refactoring

---
 src/qComponents/QCascader/src/QCascader.vue   | 36 +++++++++++--------
 .../QCascader/src/QCascaderMenu.vue           | 21 ++++++-----
 .../QCascader/src/QCascaderPanel.vue          |  6 ++--
 src/qComponents/QCheckbox/src/QCheckbox.vue   | 12 +++++--
 src/qComponents/helpers/index.js              |  5 +++
 src/vars.scss                                 |  3 +-
 stories/core/colors.js                        |  3 +-
 7 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/src/qComponents/QCascader/src/QCascader.vue b/src/qComponents/QCascader/src/QCascader.vue
index 9a749d7f..9757ec88 100644
--- a/src/qComponents/QCascader/src/QCascader.vue
+++ b/src/qComponents/QCascader/src/QCascader.vue
@@ -106,7 +106,7 @@
 <script>
 import { createPopper } from '@popperjs/core';
 import Emitter from '../../mixins/emitter';
-import { addResizeListener, removeResizeListener } from '../../helpers';
+import { addResizeListener, removeResizeListener, randId } from '../../helpers';
 
 import QCascaderPanel from './QCascaderPanel';
 
@@ -330,7 +330,7 @@ export default {
   },
 
   created() {
-    this.id = `id${Date.now().toString(16)}`;
+    this.id = randId('q-cascader-');
   },
 
   mounted() {
@@ -348,35 +348,41 @@ export default {
 
   methods: {
     handleKeyUp(e) {
-      if (this.focus) {
-        if (
-          e.target.classList.contains('q-input__inner') &&
-          e.key === 'Enter'
-        ) {
-          this.togglePopper();
-        }
+      if (!this.focus) return;
+      if (e.target.classList.contains('q-input__inner') && e.key === 'Enter') {
+        this.togglePopper();
+      }
 
-        if (e.key === 'Escape') {
+      switch (e.key) {
+        case 'Escape': {
           this.$refs.input.blur();
           this.hidePopper();
+          break;
         }
 
-        if (e.key === 'Backspace') {
+        case 'Backspace': {
           this.deleteTag();
+          break;
         }
 
-        if (e.key === 'Tab') {
+        case 'Tab': {
           if (!this.$refs.reference.contains(document.activeElement)) {
             this.hidePopper();
             this.focus = false;
           }
+          break;
         }
 
-        if (
-          ['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown'].includes(e.key)
-        ) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+        case 'ArrowLeft':
+        case 'ArrowDown': {
           this.$refs.panel.navigateFocus(e);
+          break;
         }
+
+        default:
+          break;
       }
     },
 
diff --git a/src/qComponents/QCascader/src/QCascaderMenu.vue b/src/qComponents/QCascader/src/QCascaderMenu.vue
index 2b637ac0..9c24010c 100644
--- a/src/qComponents/QCascader/src/QCascaderMenu.vue
+++ b/src/qComponents/QCascader/src/QCascaderMenu.vue
@@ -11,17 +11,18 @@
         <div
           v-for="(node, key) in nodes"
           v-else
-          :id="`q-cascader-node-${index}-${key}`"
+          :id="`${cascader.id}-node-${index}-${key}`"
           :key="key"
           :class="getNodeClass(node)"
           role="menuitem"
           tabindex="-1"
-          @click="e => handleExpand(e, node)"
-          @keyup.enter="e => handleEnterKeyUp(e, node)"
-          @keyup.right="e => handleExpand(e, node)"
+          @click="e => expandMenuItem(e, node)"
+          @keyup.enter="e => handleEnterKeyUp(e, node, index, key)"
+          @keyup.right="e => expandMenuItem(e, node)"
         >
           <q-checkbox
             v-if="cascader.multiple"
+            :ref="`QCheckbox${index}${key}`"
             input-tab-index="-1"
             :value="getChecked(node)"
             :indeterminate="getIndeterminate(node)"
@@ -116,14 +117,16 @@ export default {
   },
 
   methods: {
-    handleEnterKeyUp(e, node) {
+    handleEnterKeyUp(e, node, index, key) {
       if (this.cascader.multiple) {
-        const checkbox = e.target.querySelector('.q-checkbox__original');
-        if (checkbox) checkbox.click();
+        const QCheckboxInstance = this.$refs[`QCheckbox${index}${key}`]?.[0];
+        if (QCheckboxInstance) {
+          QCheckboxInstance.nativeClick();
+        }
         return;
       }
 
-      this.handleExpand(e, node);
+      this.expandMenuItem(e, node);
     },
     getIndeterminate(node) {
       if (
@@ -235,7 +238,7 @@ export default {
       };
     },
 
-    handleExpand(e, value) {
+    expandMenuItem(e, value) {
       if (e.key === 'ArrowRight' && !value.children) return;
       if (!value.children && !this.cascader.multiple) {
         this.cascader.emit(value.value);
diff --git a/src/qComponents/QCascader/src/QCascaderPanel.vue b/src/qComponents/QCascader/src/QCascaderPanel.vue
index 98764a54..e13cb322 100644
--- a/src/qComponents/QCascader/src/QCascaderPanel.vue
+++ b/src/qComponents/QCascader/src/QCascaderPanel.vue
@@ -68,7 +68,9 @@ export default {
   methods: {
     navigateFocus(e) {
       if (e.target.classList.contains('q-input__inner')) {
-        const firstNode = this.$el.querySelector('#q-cascader-node-0-0');
+        const firstNode = this.$el.querySelector(
+          `#${this.cascader.id}-node-0-0`
+        );
         if (firstNode) {
           firstNode.focus();
         }
@@ -120,7 +122,7 @@ export default {
       }
 
       const node = this.$el.querySelector(
-        `#q-cascader-node-${nextNodePosition[0]}-${nextNodePosition[1]}`
+        `#${this.cascader.id}-node-${nextNodePosition[0]}-${nextNodePosition[1]}`
       );
 
       if (node) {
diff --git a/src/qComponents/QCheckbox/src/QCheckbox.vue b/src/qComponents/QCheckbox/src/QCheckbox.vue
index 0ba7c341..e6c87c1c 100644
--- a/src/qComponents/QCheckbox/src/QCheckbox.vue
+++ b/src/qComponents/QCheckbox/src/QCheckbox.vue
@@ -28,6 +28,7 @@
         />
       </span>
       <input
+        ref="checkboxInput"
         v-model="model"
         class="q-checkbox__original"
         type="checkbox"
@@ -102,8 +103,8 @@ export default {
      * as native tabIndex
      */
     inputTabIndex: {
-      type: String,
-      default: '0'
+      type: [Number, String],
+      default: null
     }
   },
 
@@ -194,6 +195,13 @@ export default {
   },
 
   methods: {
+    /**
+     * @public
+     */
+    nativeClick() {
+      this.$refs.checkboxInput.click();
+    },
+
     addToStore() {
       if (Array.isArray(this.model) && this.model.includes(this.label)) {
         this.model.push(this.label);
diff --git a/src/qComponents/helpers/index.js b/src/qComponents/helpers/index.js
index 8e2a6e5f..02c27adb 100644
--- a/src/qComponents/helpers/index.js
+++ b/src/qComponents/helpers/index.js
@@ -65,3 +65,8 @@ export const removeResizeListener = (element, fn) => {
     element.__ro__.disconnect();
   }
 };
+
+export const randId = prefix =>
+  Math.random()
+    .toString(36)
+    .replace('0.', prefix ?? '');
diff --git a/src/vars.scss b/src/vars.scss
index 0bffe702..38a194ce 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -4,6 +4,7 @@
   --color-primary-blue: #4162f0;
   --color-primary-blue-light: #74aff8;
   --color-primary-blue-aqua: #5ecae7;
+  --color-primary-darker: #b83e65;
   --color-primary-black: #1d1c1a;
 
   --color-secondary-orange: #f95e2d;
@@ -20,8 +21,6 @@
   --color-tertiary-gray-ultra-dark: #c4c4c4;
   --color-tertiary-gray-ultra-darker: #adacae;
 
-  --color-primary-darker: #b83e65;
-
   --color-rgb-white: 255, 255, 255;
   --color-rgb-blue: 174, 174, 192;
   --color-rgb-gray: 29, 28, 26;
diff --git a/stories/core/colors.js b/stories/core/colors.js
index a5827981..fbcb60dc 100644
--- a/stories/core/colors.js
+++ b/stories/core/colors.js
@@ -4,7 +4,8 @@ export const primaryColors = {
   '--color-primary-blue': '#4162f0',
   '--color-primary-blue-light': '#74aff8',
   '--color-primary-blue-aqua': '#5ecae7',
-  '--color-primary-black': '#1d1c1a'
+  '--color-primary-black': '#1d1c1a',
+  '--color-primary-darker': '#b83e65'
 };
 
 export const secondaryColors = {