From a6999b6bebac7da9fec09629fb7ab887f6fad3c7 Mon Sep 17 00:00:00 2001
From: Tim <darknelmail.com@mail.ru>
Date: Mon, 8 Feb 2021 16:03:14 +0300
Subject: [PATCH 1/2] add accessibility to QContextMenu

---
 .../QContextMenu/src/QContextMenu.vue         | 48 ++++++++++++++++++-
 .../QContextMenu/src/q-context-menu.scss      |  5 +-
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/qComponents/QContextMenu/src/QContextMenu.vue b/src/qComponents/QContextMenu/src/QContextMenu.vue
index 8d409d6f..77160da1 100644
--- a/src/qComponents/QContextMenu/src/QContextMenu.vue
+++ b/src/qComponents/QContextMenu/src/QContextMenu.vue
@@ -8,7 +8,7 @@
       <slot v-if="$slots.default" />
       <button
         v-else
-        class="q-context-trigger__default q-icon-dots-3-horizontal"
+        class="q-context-trigger__button q-icon-dots-3-horizontal"
       />
     </div>
 
@@ -20,6 +20,7 @@
       <button
         v-for="(item, index) in menuItems"
         :key="index"
+        tabindex="-1"
         class="q-context-menu__item"
         :class="{ 'q-context-menu__item_with-icon': item.icon }"
         @click.prevent="handleItemClick(item.action)"
@@ -60,7 +61,8 @@ export default {
 
   data() {
     return {
-      isContextMenuShown: false
+      isContextMenuShown: false,
+      menuItemElements: null
     };
   },
 
@@ -93,6 +95,7 @@ export default {
 
     createPopper() {
       document.addEventListener('click', this.handleDocumentClick);
+      document.addEventListener('keyup', this.handleKeyUp);
       this.isContextMenuShown = true;
 
       if (this.appendToBody) document.body.appendChild(this.$refs.qContextMenu);
@@ -118,6 +121,10 @@ export default {
         this.$refs.qContextMenu,
         options
       );
+
+      this.menuItemElements = this.$refs.qContextMenu.querySelectorAll(
+        '.q-context-menu__item'
+      );
     },
 
     handleTriggerClick() {
@@ -134,12 +141,49 @@ export default {
       this.closePopper();
     },
 
+    handleKeyUp(e) {
+      if (!this.isContextMenuShown) return;
+      if (e.key === 'Escape') this.closePopper();
+      if (!['ArrowUp', 'ArrowDown'].includes(e.key)) return;
+      if (document.activeElement.classList.contains('q-context-menu__item')) {
+        let currentNodeIndex;
+        let nextNodeIndex;
+        Array.from(this.menuItemElements).some((element, index) => {
+          const isItActiveElement = document.activeElement === element;
+
+          if (isItActiveElement) currentNodeIndex = index;
+
+          return isItActiveElement;
+        });
+
+        switch (e.key) {
+          case 'ArrowUp': {
+            nextNodeIndex = currentNodeIndex - 1;
+            break;
+          }
+
+          case 'ArrowDown': {
+            nextNodeIndex = currentNodeIndex + 1;
+            break;
+          }
+
+          default:
+            break;
+        }
+        this.menuItemElements[nextNodeIndex]?.focus();
+      } else {
+        this.menuItemElements[0]?.focus();
+      }
+    },
+
     closePopper() {
       document.removeEventListener('click', this.handleDocumentClick);
+      document.removeEventListener('keyup', this.handleKeyUp);
 
       if (this.appendToBody) document.body.removeChild(this.$refs.qContextMenu);
 
       this.isContextMenuShown = false;
+      this.menuItemElements = null;
     }
   }
 };
diff --git a/src/qComponents/QContextMenu/src/q-context-menu.scss b/src/qComponents/QContextMenu/src/q-context-menu.scss
index 43584d0f..ed017fe5 100644
--- a/src/qComponents/QContextMenu/src/q-context-menu.scss
+++ b/src/qComponents/QContextMenu/src/q-context-menu.scss
@@ -61,7 +61,7 @@
     display: inline-block;
     cursor: pointer;
 
-    &__default {
+    &__button {
       display: block;
       width: 40px;
       height: 40px;
@@ -72,7 +72,8 @@
       border: none;
       outline: none;
 
-      .q-context-trigger:hover & {
+      &:hover,
+      &[data-focus-visible-added] {
         color: var(--color-primary-black);
         background-color: rgba(var(--color-rgb-gray), 0.16);
         border-radius: 100%;

From 2d2b00c7b0bf0f54e777b7cf21f419d7990bf0da Mon Sep 17 00:00:00 2001
From: Tim <darknelmail.com@mail.ru>
Date: Mon, 8 Feb 2021 17:58:09 +0300
Subject: [PATCH 2/2] add zIndex

---
 src/qComponents/QContextMenu/src/QContextMenu.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/qComponents/QContextMenu/src/QContextMenu.vue b/src/qComponents/QContextMenu/src/QContextMenu.vue
index 77160da1..143a5524 100644
--- a/src/qComponents/QContextMenu/src/QContextMenu.vue
+++ b/src/qComponents/QContextMenu/src/QContextMenu.vue
@@ -122,6 +122,7 @@ export default {
         options
       );
 
+      this.$refs.qContextMenu.style.zIndex = this.$Q?.zIndex ?? 2000;
       this.menuItemElements = this.$refs.qContextMenu.querySelectorAll(
         '.q-context-menu__item'
       );