[QCascader, QButton, QBreadcrumbs] Add more accessibility

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);
     }

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;

src/qComponents/QCascader/src/QCascader.vue

@@ -11,14 +11,17 @@
       :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
       }"
-      @focus="handleFocus"
-      @blur="handleBlur"
       @mouseenter.native="handleMouseEnter"
       @mouseleave.native="showClose = false"
+      @focus="handleInputFocus"
       @click="togglePopper"
     >
       <template slot="suffix">
@@ -252,7 +255,9 @@ export default {
       inputInitialHeight: 0,
       popper: null,
       showClose: false,
-      areTagsHovered: false
+      areTagsHovered: false,
+      focus: false,
+      id: null
     };
   },
 
@@ -324,18 +329,57 @@ export default {
     }
   },
 
+  created() {
+    this.id = `id${(+new Date()).toString(16)}`;
+  },
+
   mounted() {
     const { input } = this.$refs;
     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 (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();
+        }
+
+        if (e.key === 'Backspace') {
+          this.deleteTag();
+        }
+
+        if (e.key === 'Tab') {
+          if (!this.$refs.reference.contains(document.activeElement)) {
+            this.hidePopper();
+            this.focus = false;
+          }
+        }
+
+        if (
+          ['ArrowRight', 'ArrowUp', 'ArrowLeft', 'ArrowDown'].includes(e.key)
+        ) {
+          this.$refs.panel.navigateFocus(e);
+        }
+      }
+    },
+
     handleTagsHover() {
       this.areTagsHovered = true;
       this.showClose = true;
@@ -353,9 +397,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);
     },
@@ -417,14 +466,10 @@ export default {
       }
     },
 
-    handleFocus(e) {
+    handleInputFocus(e) {
       this.$emit('focus', e);
+      this.focus = true;
     },
-
-    handleBlur(e) {
-      this.$emit('blur', e);
-    },
-
     updateStyle() {
       const { $el, inputInitialHeight } = this;
       if (!$el) return;

src/qComponents/QCascader/src/QCascaderMenu.vue

@@ -11,12 +11,18 @@
         <div
           v-for="(node, key) in nodes"
           v-else
+          :id="`q-cascader-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)"
         >
           <q-checkbox
             v-if="cascader.multiple"
+            input-tab-index="-1"
             :value="getChecked(node)"
             :indeterminate="getIndeterminate(node)"
             @change="isChecked => handleValueChange(node, isChecked)"
@@ -110,6 +116,15 @@ export default {
   },
 
   methods: {
+    handleEnterKeyUp(e, node) {
+      if (this.cascader.multiple) {
+        const checkbox = e.target.querySelector('.q-checkbox__original');
+        if (checkbox) checkbox.click();
+        return;
+      }
+
+      this.handleExpand(e, node);
+    },
     getIndeterminate(node) {
       if (
         !this.cascader.checkedValues ||
@@ -221,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);
       }

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;

src/qComponents/QCascader/src/q-cascader-menu.scss

@@ -111,10 +111,10 @@
       }
     }
 
+    &:focus,
     &_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);
 
@@ -123,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;

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() {

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;

stories/components/QCascader.stories.js

@@ -1,4 +1,3 @@
-import { multiply } from 'lodash-es';
 import QCascader from '../../src/qComponents/QCascader';
 
 const args = {