[QSelect] accessibility navigation

src/qComponents/QButton/src/q-button.scss

@@ -70,7 +70,7 @@
 
   &_theme {
     &_primary {
-      &:focus {
+      &:focus-visible {
         background-color: var(--color-primary-darker);
         background-image: none;
       }

src/qComponents/QCascader/src/QCascaderPanel.vue

@@ -67,7 +67,10 @@ export default {
 
   methods: {
     navigateFocus(e) {
-      if (e.target.classList.contains('q-input__inner')) {
+      if (
+        ['ArrowDown', 'ArrowUp'].includes(e.key) &&
+        e.target instanceof HTMLInputElement
+      ) {
         const firstNode = this.$el.querySelector(
           `#${this.cascader.id}-node-0-0`
         );

src/qComponents/QOption/src/QOption.vue

@@ -7,12 +7,14 @@
       'q-option_disabled': isDisabled,
       'q-option_with-checkbox': qSelect.multiple
     }"
+    :tabindex="isDisabled ? null : '-1'"
     @mouseenter="handleMouseEnter"
     @click.stop="handleOptionClick"
   >
     <q-checkbox
       v-if="qSelect.multiple"
       root-tag="div"
+      input-tab-index="-1"
       :value="isSelected"
       :disabled="isDisabled"
     />

src/qComponents/QOption/src/q-option.scss

@@ -15,6 +15,7 @@
   height: 40px;
   padding: 8px 16px;
   background-color: var(--option-background-color-base);
+  outline: none;
   box-shadow: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
     1px 1px 3px rgba(var(--color-rgb-blue), 0.4);
   cursor: pointer;
@@ -32,6 +33,14 @@
     background-color: var(--option-background-color-hover);
   }
 
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background-color: var(--option-background-color-hover);
+  }
+
   &_all ~ .q-option {
     padding-left: 24px;
   }

src/qComponents/QSelect/src/QSelect.vue

@@ -1,11 +1,12 @@
 <template>
   <div
+    ref="reference"
     v-click-outside="handleOutsideClick"
     class="q-select"
     @click="toggleMenu"
   >
     <q-input
-      ref="reference"
+      ref="input"
       v-model="selectedLabel"
       type="text"
       class="q-select__input"
@@ -19,9 +20,10 @@
       @focus="handleFocus"
       @blur="handleBlur"
       @keyup.native="onInputChange"
-      @keydown.native.enter.prevent="handleEnterKeydown"
-      @keydown.native.esc.stop.prevent="visible = false"
-      @keydown.native.tab="visible = false"
+      @keyup.native.enter.prevent="handleEnterKeyUp"
+      @keyup.native.esc.stop.prevent="visible = false"
+      @keyup.native.tab="visible = false"
+      @keyup.native.backspace="handleClear"
       @paste.native="onInputChange"
       @mouseenter.native="inputHovering = true"
       @mouseleave.native="inputHovering = false"
@@ -35,7 +37,7 @@
         <span
           v-if="isClearBtnShown"
           class="q-select__caret q-input__icon q-icon-close"
-          @click.stop="handleClearClick"
+          @click.stop="handleClear"
         />
       </template>
     </q-input>
@@ -49,7 +51,7 @@
       :filterable="filterable"
       :is-disabled="isDisabled"
       :query.sync="query"
-      @keydown-enter="handleEnterKeydown"
+      @keyup-enter="handleEnterKeyUp"
       @focus="handleFocus"
       @remove-tag="deleteTag"
       @exit="visible = false"
@@ -417,6 +419,7 @@ export default {
 
   mounted() {
     addResizeListener(this.$el, this.handleResize);
+    document.addEventListener('keyup', this.handleKeyUp, true);
 
     this.$nextTick(() => {
       this.inputWidth = this.$el.getBoundingClientRect().width;
@@ -427,6 +430,7 @@ export default {
 
   beforeDestroy() {
     if (this.$el) removeResizeListener(this.$el, this.handleResize);
+    document.removeEventListener('keyup', this.handleKeyUp, true);
 
     const dropdown = this.$refs.dropdown?.$el;
     if (dropdown?.parentNode === document.body) {
@@ -435,6 +439,47 @@ export default {
   },
 
   methods: {
+    togglePopper() {
+      if (this.popper) {
+        this.hidePopper();
+      } else {
+        this.showPopper();
+      }
+    },
+
+    handleKeyUp(e) {
+      if (!this.isDropdownShown) return;
+      if (
+        this.$refs.input.$el.querySelector('input') === e.target &&
+        e.key === 'Enter'
+      ) {
+        this.togglePopper();
+      }
+
+      switch (e.key) {
+        case 'Escape': {
+          this.visible = false;
+          break;
+        }
+        case 'Tab': {
+          if (!this.$refs.reference.contains(document.activeElement)) {
+            this.visible = false;
+          }
+          break;
+        }
+        case 'ArrowRight':
+        case 'ArrowUp':
+        case 'ArrowLeft':
+        case 'ArrowDown':
+        case 'Enter': {
+          this.$refs.dropdown.navigateDropdown(e);
+          break;
+        }
+        default:
+          break;
+      }
+    },
+
     handleOutsideClick() {
       this.visible = false;
     },
@@ -448,13 +493,13 @@ export default {
     },
 
     createPopper() {
-      const { reference, dropdown } = this.$refs;
+      const { input, dropdown } = this.$refs;
 
       if (this.appendToBody) {
         document.body.appendChild(dropdown.$el);
       }
 
-      this.popper = createPopper(reference.$el, dropdown.$el, {
+      this.popper = createPopper(input.$el, dropdown.$el, {
         modifiers: [
           {
             name: 'offset',
@@ -556,7 +601,7 @@ export default {
 
     blur() {
       this.visible = false;
-      this.$refs.reference.blur();
+      this.$refs.input.blur();
     },
 
     handleBlur(event) {
@@ -565,7 +610,7 @@ export default {
       }, 50);
     },
 
-    handleClearClick() {
+    handleClear() {
       const value = this.multiple ? [] : null;
       this.emitValueUpdate(value);
 
@@ -619,11 +664,11 @@ export default {
       }
 
       if (this.visible) {
-        (this.$refs.tags?.$refs.input ?? this.$refs.reference).focus();
+        (this.$refs.tags?.$refs.input ?? this.$refs.input).focus();
       }
     },
 
-    handleEnterKeydown() {
+    handleEnterKeyUp() {
       if (!this.visible) {
         this.toggleMenu();
         return;

src/qComponents/QSelect/src/QSelectDropdown.vue

@@ -13,11 +13,13 @@
     >
       <div
         v-if="selectAllShown && isVisibleOptionExist && multiple"
+        tabindex="-1"
         class="q-option q-option_with-checkbox q-option_all"
         @click.stop="handleSelectAllClick"
       >
         <q-checkbox
           root-tag="div"
+          input-tab-index="-1"
           :value="areAllSelected"
           :indeterminate="isIndeterminate"
         />
@@ -134,6 +136,61 @@ export default {
   },
 
   methods: {
+    navigateDropdown(e) {
+      if (
+        ['ArrowDown', 'ArrowUp'].includes(e.key) &&
+        e.target instanceof HTMLInputElement
+      ) {
+        const firstNode = this.$el.querySelector(`.q-option`);
+        if (firstNode) {
+          firstNode.focus();
+        }
+      }
+
+      if (!e.target.classList.contains('q-option')) return;
+      const availableOptions = this.options.filter(
+        ({ isDisabled, isVisible }) => !isDisabled && isVisible
+      );
+      const availableElements = availableOptions.map(option => option.$el);
+      let currentNodeIndex;
+      let nextNodeIndex;
+      availableElements.forEach((element, index) => {
+        if (document.activeElement === element) {
+          currentNodeIndex = index;
+        }
+      });
+
+      switch (e.key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          nextNodeIndex = currentNodeIndex - 1;
+          break;
+
+        case 'Tab':
+          this.qSelect.visible = false;
+          break;
+
+        case 'ArrowDown':
+        case 'ArrowRight':
+          nextNodeIndex = currentNodeIndex + 1;
+          break;
+
+        case 'Enter': {
+          this.qSelect.toggleOptionSelection(
+            availableOptions[currentNodeIndex]
+          );
+          break;
+        }
+        default:
+          break;
+      }
+
+      const node = availableElements[nextNodeIndex];
+
+      if (node) {
+        node.focus();
+      }
+    },
     handleSelectAllClick() {
       if (this.areAllSelected) {
         const keysToRemove = this.options

src/qComponents/QSelect/src/QSelectTags.vue

@@ -40,9 +40,9 @@
       class="q-select-tags__input"
       :autocomplete="autocomplete"
       @focus="$emit('focus')"
-      @keydown.enter.prevent="$emit('keydown-enter')"
-      @keydown.esc.stop.prevent="emitExit"
-      @keydown.tab="emitExit"
+      @keyup.esc.stop.prevent="emitExit"
+      @keydown.enter.prevent="$emit('keyup-enter')"
+      @keydown.backspace.capture="handleBackspaceKeyDown"
       @input="handleInput"
     />
   </div>
@@ -65,6 +65,12 @@ export default {
   },
 
   methods: {
+    handleBackspaceKeyDown() {
+      if (this.query.length === 0) {
+        this.$emit('remove-tag', this.selected[this.selected.length - 1]);
+      }
+    },
+
     handleTagClose(option) {
       this.$emit('remove-tag', option);
     },

src/qComponents/QSelect/src/q-select.scss

@@ -17,6 +17,7 @@
 
     .q-input__inner {
       height: 100%;
+      user-select: none;
     }
   }
 }