Add latest changes from gitlab-org/gitlab@master

4 files changed, 29 insertions, 18 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/brand_logo.vue b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
index 02cf36fb053..2e6c597ea96 100644
--- a/app/assets/javascripts/super_sidebar/components/brand_logo.vue
+++ b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
@@ -46,7 +46,7 @@ export default {
     <span
       v-else
       v-safe-html="$options.logo"
-      aria-hidden
+      aria-hidden="true"
       data-testid="brand-header-default-logo"
     ></span>
   </a>
diff --git a/app/assets/javascripts/super_sidebar/components/menu_section.vue b/app/assets/javascripts/super_sidebar/components/menu_section.vue
index 6b5002e1aa8..91b781b8235 100644
--- a/app/assets/javascripts/super_sidebar/components/menu_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/menu_section.vue
@@ -152,20 +152,20 @@ export default {
     <gl-collapse
       :id="itemId"
       v-model="isExpanded"
-      :aria-label="item.title"
       class="gl-list-style-none gl-p-0 gl-m-0 gl-transition-duration-medium gl-transition-timing-function-ease"
       data-qa-selector="menu_section"
       :data-qa-section-name="item.title"
-      tag="ul"
     >
       <slot>
-        <nav-item
-          v-for="subItem of item.items"
-          :key="`${item.title}-${subItem.title}`"
-          :item="subItem"
-          @pin-add="(itemId) => $emit('pin-add', itemId)"
-          @pin-remove="(itemId) => $emit('pin-remove', itemId)"
-        />
+        <ul :aria-label="item.title" class="gl-list-style-none gl-p-0 gl-m-0">
+          <nav-item
+            v-for="subItem of item.items"
+            :key="`${item.title}-${subItem.title}`"
+            :item="subItem"
+            @pin-add="(itemId) => $emit('pin-add', itemId)"
+            @pin-remove="(itemId) => $emit('pin-remove', itemId)"
+          />
+        </ul>
       </slot>
     </gl-collapse>
   </component>
diff --git a/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue b/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
index 02488e99c0e..772072c0996 100644
--- a/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/sidebar_menu.vue
@@ -158,7 +158,11 @@ export default {
 
 <template>
   <div class="gl-p-2 gl-relative">
-    <ul v-if="hasStaticItems" class="gl-p-0 gl-m-0" data-testid="static-items-section">
+    <ul
+      v-if="hasStaticItems"
+      class="gl-list-style-none gl-p-0 gl-m-0"
+      data-testid="static-items-section"
+    >
       <nav-item v-for="item in staticItems" :key="item.id" :item="item" is-static />
     </ul>
     <pinned-section
@@ -174,7 +178,11 @@ export default {
       class="gl-my-2 gl-mx-4"
       data-testid="main-menu-separator"
     />
-    <ul class="gl-p-0 gl-list-style-none" data-testid="non-static-items-section">
+    <ul
+      aria-labelledby="super-sidebar-context-header"
+      class="gl-p-0 gl-list-style-none"
+      data-testid="non-static-items-section"
+    >
       <template v-for="item in nonStaticItems">
         <menu-section
           v-if="isSection(item)"
@@ -182,6 +190,7 @@ export default {
           :item="item"
           :separated="item.separated"
           :has-flyout="showFlyoutMenus"
+          tag="li"
           @pin-add="createPin"
           @pin-remove="destroyPin"
         />
@@ -189,7 +198,6 @@ export default {
           v-else
           :key="item.id"
           :item="item"
-          tag="li"
           @pin-add="createPin"
           @pin-remove="destroyPin"
         />
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index fe3e4a8199e..038fb3ea61c 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -36,7 +36,7 @@ export default {
   mixins: [Tracking.mixin()],
   i18n: {
     skipToMainContent: __('Skip to main content'),
-    primary: s__('Navigation|Primary'),
+    primaryNavigation: s__('Navigation|Primary navigation'),
   },
   inject: ['showTrialStatusWidget'],
   props: {
@@ -138,7 +138,7 @@ export default {
     </gl-button>
     <nav
       id="super-sidebar"
-      :aria-label="$options.i18n.primary"
+      aria-labelledby="super-sidebar-heading"
       class="super-sidebar"
       :class="peekClasses"
       data-testid="super-sidebar"
@@ -147,6 +147,9 @@ export default {
       @mouseenter="isMouseover = true"
       @mouseleave="isMouseover = false"
     >
+      <h2 id="super-sidebar-heading" class="gl-sr-only">
+        {{ $options.i18n.primaryNavigation }}
+      </h2>
       <user-bar :has-collapse-button="!showOverlay" :sidebar-data="sidebarData" />
       <div v-if="showTrialStatusWidget" class="gl-px-2 gl-py-2">
         <trial-status-widget
@@ -158,12 +161,12 @@ export default {
         class="contextual-nav gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-overflow-hidden"
       >
         <div class="gl-flex-grow-1 gl-overflow-auto" data-testid="nav-container">
-          <h2
+          <div
+            id="super-sidebar-context-header"
             class="gl-px-5 gl-pt-3 gl-pb-2 gl-m-0 gl-reset-line-height gl-font-sm super-sidebar-context-header"
           >
             {{ sidebarData.current_context_header }}
-          </h2>
-
+          </div>
           <sidebar-menu
             v-if="menuItems.length"
             :items="menuItems"