@asd20/ui 3.2.528 → 3.2.530

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.528",
+  "version": "3.2.530",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20SiteMenu/index.vue

@@ -20,13 +20,16 @@
     ref="menuContainer"
     class="asd20-site-menu"
     @click="onBackgroundClick"
+    @focus="onFocus"
+    @blur="onBlur"
     @keyup.up.stop.prevent="previous"
     @keyup.down.stop.prevent="next"
+    @keyup.tab.stop.prevent="tabOrShiftTab"
     @keyup.right.stop.prevent="activateSection"
     @keyup.left.stop.prevent="deactivateSection"
     @keyup.escape="deactivateSection"
-    @keyup.enter="activateSection"
     tabindex="-1"
+    v-scroll-lock="active"
   >
     <focus-trap :active="active" :initial-focus="() => $refs.focused[0]">
       <div class="asd20-site-menu__viewport">
@@ -45,7 +48,7 @@
               role="menuitem"
               ref="focused"
               aria-expanded="false"
-              :aria-controls="`asd20-site-menu__item-${index}`"
+              :aria-controls="`asd20-site-menu__item-${index + 1}`"
               @click="activeSectionIndex = index"
               @mouseup="keyboardTriggeredLastAction = false"
               @keyup="keyboardTriggeredLastAction = true"
@@ -60,33 +63,41 @@
           name="slide-left"
           v-on:after-enter="afterActivateTransition"
         >
-          <!-- <focus-trap
-            :active="active"
-            aria-hidden="true"
-            returnFocusOnDeactivate="true"
-          > -->
           <div v-if="activeSection" class="asd20-site-menu__section">
-            <!-- <div> -->
-            <button
+            <!-- <button
               class="asd20-site-menu__section__back"
               aria-expanded="true"
               aira-controls="asd20-site-menu__items"
               @click="deactivateSection"
               @mouseup="keyboardTriggeredLastAction = false"
               @keyup="keyboardTriggeredLastAction = true"
+              @keyup.enter="deactivateSection"
             >
               <asd20-icon name="chevron" size="sm" />
               <span class="title">{{ activeSection.title }}</span>
-            </button>
+            </button> -->
 
             <div
               :id="`asd20-site-menu__item-${activeSectionIndex}`"
               class="asd20-site-menu__items"
               role="menu"
             >
+              <button
+                :id="`asd20-site-menu__item-${activeSectionIndex}-0`"
+                class="asd20-site-menu__section__back"
+                aria-expanded="true"
+                aira-controls="asd20-site-menu__items"
+                @click="deactivateSection"
+                @mouseup="keyboardTriggeredLastAction = false"
+                @keyup="keyboardTriggeredLastAction = true"
+                @keyup.enter="deactivateSection"
+              >
+                <asd20-icon name="chevron" size="sm" />
+                <span class="title">{{ activeSection.title }}</span>
+              </button>
               <a
                 v-for="(item, index) in activeSection.items"
-                :id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
+                :id="`asd20-site-menu__item-${activeSectionIndex}-${index + 1}`"
                 :key="index"
                 role="menuitem"
                 class="asd20-site-menu__item"
@@ -98,8 +109,6 @@
               >
             </div>
           </div>
-          <!-- </div> -->
-          <!-- </focus-trap> -->
         </transition>
       </div>
     </focus-trap>
@@ -107,9 +116,14 @@
 </template>
 
 <script>
+import Vue from 'vue'
+
 import { setTimeout } from 'timers'
 import { FocusTrap } from 'focus-trap-vue'
 import Asd20Icon from '../../atoms/Asd20Icon'
+import VScrollLock from 'v-scroll-lock'
+Vue.use(VScrollLock)
+
 export default {
   name: 'Asd20SiteMenu',
   components: { Asd20Icon, FocusTrap },
@@ -149,27 +163,49 @@ export default {
     },
     previous() {
       if (this.activeSectionIndex === -1) {
+        if (this.focusedSectionIndex === 0) {
+          this.focusedSectionIndex = this.sections.length
+          this.setFocusSection()
+        }
         if (this.focusedSectionIndex > 0) {
           this.focusedSectionIndex--
           this.setFocusSection()
         }
       } else {
-        if (this.focusedItemIndex > 0) {
-          this.focusedItemIndex--
+        if (this.focusedItemIndex === -1) {
+          this.setFocusItem()
+        } else if (this.focusedItemIndex === 0) {
+          this.focusedItemIndex = this.activeSection.items.length
           this.setFocusItem()
+        } else {
+          if (this.focusedItemIndex > 0) {
+            this.focusedItemIndex--
+            this.setFocusItem()
+          }
         }
       }
     },
     next() {
       if (this.activeSectionIndex === -1) {
+        if (this.focusedSectionIndex === this.sections.length - 1) {
+          this.focusedSectionIndex = -1
+          this.setFocusSection()
+        }
         if (this.focusedSectionIndex < this.sections.length - 1) {
           this.focusedSectionIndex++
           this.setFocusSection()
         }
       } else {
-        if (this.focusedItemIndex < this.activeSection.items.length - 1) {
-          this.focusedItemIndex++
+        if (this.focusedItemIndex === -1) {
           this.setFocusItem()
+        } else if (this.focusedItemIndex === this.activeSection.items.length) {
+          this.focusedItemIndex = 0
+          this.setFocusItem()
+        } else {
+          if (this.focusedItemIndex < this.activeSection.items.length) {
+            this.focusedItemIndex++
+            this.setFocusItem()
+          }
         }
       }
     },
@@ -180,7 +216,7 @@ export default {
     },
     afterActivateTransition() {
       this.$nextTick(() => {
-        this.focusedItemIndex = 0
+        this.focusedItemIndex = 1
         if (this.keyboardTriggeredLastAction) {
           this.setFocusItem()
         }
@@ -235,6 +271,19 @@ export default {
         this.$refs.focused[0].focus()
       })
     },
+    tabOrShiftTab(event) {
+      if (event.shiftKey) {
+        this.shiftKeyPressed()
+      } else {
+        this.shiftKeyNotPressed()
+      }
+    },
+    shiftKeyPressed() {
+      this.previous()
+    },
+    shiftKeyNotPressed() {
+      this.next()
+    },
   },
 }
 </script>