@asd20/ui 3.2.522 → 3.2.523

package/package.json

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

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

@@ -1,9 +1,7 @@
 <template>
   <div
     ref="menuContainer"
-    id="main-menu-list"
     class="asd20-site-menu"
-    role="group"
     @click="onBackgroundClick"
     @focus="onFocus"
     @blur="onBlur"
@@ -16,7 +14,7 @@
     @keydown.tab.stop="dismiss"
     tabindex="0"
   >
-  <!-- <div
+    <!-- <div
     id="main-menu-list"
     ref="menuContainer"
     class="asd20-site-menu"
@@ -29,20 +27,23 @@
   > -->
     <focus-trap :active="active" :initial-focus="() => $refs.focused[0]">
       <div class="asd20-site-menu__viewport">
-        <transition name="slide-right">
+        <transition name="slide-right" role="group">
           <div
             v-if="!activeSection"
-            role="group"
+            id="main-menu-list"
             class="asd20-table-of-contents"
+            tabindex="-1"
+            role="menubar"
           >
             <button
               v-for="(section, index) in sections"
               :key="index"
               :id="`asd20-site-menu__section-${index}`"
               class="asd20-table-of-contents__item"
+              role="menuitem"
               ref="focused"
               aria-expanded="false"
-              :aria-owns="`asd20-site-menu__item-${index}`"
+              :aria-controls="`asd20-site-menu__item-${index}`"
               @click="activeSectionIndex = index"
               @mouseup="keyboardTriggeredLastAction = false"
               @keyup="keyboardTriggeredLastAction = true"
@@ -61,38 +62,44 @@
             aria-hidden="true"
             returnFocusOnDeactivate="true"
           > -->
-          <div v-if="activeSection" class="asd20-site-menu__section">
-            <div>
-              <button
-                class="asd20-site-menu__section__back"
-                aria-expanded="true"
-                @click="deactivateSection"
-                @mouseup="keyboardTriggeredLastAction = false"
-                @keyup="keyboardTriggeredLastAction = true"
-              >
-                <asd20-icon name="chevron" size="sm" />
-                <span class="title">{{ activeSection.title }}</span>
-              </button>
+          <div
+            v-if="activeSection"
+            id="main-menu-list"
+            class="asd20-site-menu__section"
+          >
+            <!-- <div> -->
+            <button
+              class="asd20-site-menu__section__back"
+              aria-expanded="true"
+              role="menuitem"
+              @click="deactivateSection"
+              @mouseup="keyboardTriggeredLastAction = false"
+              @keyup="keyboardTriggeredLastAction = true"
+            >
+              <asd20-icon name="chevron" size="sm" />
+              <span class="title">{{ activeSection.title }}</span>
+            </button>
 
-              <div
-                :id="`asd20-site-menu__item-${activeSectionIndex}`"
-                class="asd20-site-menu__items"
+            <div
+              :id="`asd20-site-menu__item-${activeSectionIndex}`"
+              class="asd20-site-menu__items"
+              role="group"
+            >
+              <a
+                v-for="(item, index) in activeSection.items"
+                :id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
+                :key="index"
+                role="menuitem"
+                class="asd20-site-menu__item"
+                :href="item.url"
+                :target="
+                  !item.url || item.url.startsWith('/') ? undefined : '_blank'
+                "
+                >{{ item.title }}</a
               >
-                <a
-                  v-for="(item, index) in activeSection.items"
-                  :id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
-                  :key="index"
-
-                  class="asd20-site-menu__item"
-                  :href="item.url"
-                  :target="
-                    !item.url || item.url.startsWith('/') ? undefined : '_blank'
-                  "
-                  >{{ item.title }}</a
-                >
-              </div>
             </div>
           </div>
+          <!-- </div> -->
           <!-- </focus-trap> -->
         </transition>
       </div>
@@ -104,7 +111,6 @@
 import { setTimeout } from 'timers'
 import { FocusTrap } from 'focus-trap-vue'
 import Asd20Icon from '../../atoms/Asd20Icon'
-
 export default {
   name: 'Asd20SiteMenu',
   components: { Asd20Icon, FocusTrap },
@@ -205,7 +211,6 @@ export default {
         `asd20-site-menu__section-${this.focusedSectionIndex}`
       )
       let timeout = el ? 0 : 200
-
       setTimeout(() => {
         el = document.getElementById(
           `asd20-site-menu__section-${this.focusedSectionIndex}`
@@ -238,7 +243,6 @@ export default {
 <style lang="scss" scoped>
 @import '../../../design/_variables.scss';
 @import '../../../design/_mixins.scss';
-
 .slide-right-enter-active,
 .slide-right-leave-active {
   transition: all asd20-speed(1) $anim-easing;
@@ -247,7 +251,6 @@ export default {
 .slide-right-leave-to {
   transform: translate3d(-100%, 0, 0);
 }
-
 .slide-left-enter-active,
 .slide-left-leave-active {
   transition: all asd20-speed(1) $anim-easing;
@@ -256,7 +259,6 @@ export default {
 .slide-left-leave-to {
   transform: translate3d(100%, 0, 0);
 }
-
 .asd20-site-menu {
   position: fixed;
   z-index: 300;
@@ -273,7 +275,6 @@ export default {
     // outline: none;
   }
 }
-
 .asd20-site-menu__viewport {
   position: absolute;
   left: 0;
@@ -285,7 +286,6 @@ export default {
   overflow: auto;
   // overflow-y: scroll !important;
 }
-
 .asd20-table-of-contents {
   display: flex;
   flex-grow: 1;
@@ -299,7 +299,6 @@ export default {
   right: 0;
   bottom: 0;
   // box-shadow: 1px 10px 10px 0 rgba(0, 0, 0, 0.25);
-
   &__item {
     appearance: none;
     border: none;
@@ -341,7 +340,6 @@ export default {
     }
   }
 }
-
 .asd20-site-menu__section {
   display: flex;
   flex-direction: column;
@@ -367,13 +365,11 @@ export default {
     &:active {
       background: rgba(0, 0, 0, 0.0625);
     }
-
     &:focus {
       background: rgba(0, 0, 0, 0.0625);
       // outline: none;
       box-shadow: 0 0 0 5px var(--website-menu__link-color) inset;
     }
-
     .title {
       color: var(--website-menu__title-color);
       font-weight: 900;
@@ -387,12 +383,10 @@ export default {
       // opacity: 0.5;
     }
   }
-
   .asd20-site-menu__items {
     overflow-y: scroll; /* has to be scroll, not auto */
     // -webkit-overflow-scrolling: touch;
   }
-
   .asd20-site-menu__item {
     display: flex;
     justify-content: flex-start;
@@ -411,7 +405,6 @@ export default {
     &:active {
       background: var(--website-menu__hover-background-color);
     }
-
     &:last-child {
       box-shadow: none;
     }
@@ -423,7 +416,6 @@ export default {
   }
   // display: none;
 }
-
 @media (min-width: 768px) {
   .asd20-site-menu__section {
     flex-grow: 0.1;
@@ -437,7 +429,6 @@ export default {
     }
   }
 }
-
 @media (min-width: 1024px) {
   .asd20-site-menu {
     position: fixed;
@@ -451,7 +442,6 @@ export default {
     display: flex;
     flex-direction: column;
   }
-
   .asd20-site-menu__viewport {
     position: absolute;
     left: 0;
@@ -476,7 +466,6 @@ export default {
       }
     }
   }
-
   .asd20-site-menu__section {
     &__back {
       background: var(--website-menu__open-background-color, white);