Merge pull request #951 from oslokommune/navbar-accessibility

Improve navbar accessibility
oslokommune · Dec 21, 2023 · 2aee9e4 · 2aee9e4
2 parents 52cfd02 + 9a1c800
commit 2aee9e4
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ All notable changes to this project will be documented in this file. The format
 ### Fixed
 
 - Fixed disappearing navigation header for mobile users.
+- Added missing aria roles and attributes for navbar components.
 
 ### Breaking changes
 

diff --git a/src/components/Navigation/SiteHeader.vue b/src/components/Navigation/SiteHeader.vue
@@ -1,9 +1,9 @@
 <template>
   <header class="site-navigation">
-    <nav class="nav-bar site-navigation__menubar">
+    <nav class="nav-bar site-navigation__menubar" role="menubar">
       <!-- Site menu -->
       <nav-menu class="site-menu">
-        <nav-menu-item dropdown>
+        <nav-menu-item :aria="{ label: siteMenuLabel }" dropdown>
           <template #text>
             <pkt-icon class="nav-menu-item__icon" name="bullseye" />
             <span class="pkt-show-tablet-up">{{ siteMenuLabel }}</span>
@@ -23,6 +23,7 @@
           :class="['item-menu__item', `item-menu__item--${itemMenuTab.pull || 'left'}`]"
           :route="itemMenuTab.route"
           :active="itemMenuTab.active"
+          :aria="{ label: itemMenuTab.label || itemMenuTab.tooltip }"
         >
           <template #text>
             <pkt-icon
@@ -42,13 +43,20 @@
 
       <!-- User menu -->
       <nav-menu class="user-menu">
-        <nav-menu-item v-if="user" ref="userMenu" v-slot="{ close }" icon="user" dropdown>
+        <nav-menu-item
+          v-if="user"
+          ref="userMenu"
+          v-slot="{ close }"
+          :aria="{ label: $t('user.myProfile') }"
+          icon="user"
+          dropdown
+        >
           <user-menu-dropdown :id="user.id" :handle-navigation="close" />
         </nav-menu-item>
       </nav-menu>
     </nav>
 
-    <nav v-if="showToolbar" class="nav-bar site-navigation__toolbar">
+    <nav v-if="showToolbar" class="nav-bar site-navigation__toolbar" role="menubar">
       <period-selector-menu />
       <view-toggle />
     </nav>

diff --git a/src/components/Navigation/navbar/NavMenu.vue b/src/components/Navigation/navbar/NavMenu.vue
@@ -6,6 +6,7 @@
       { 'nav-menu--tabs': tabs },
       { 'nav-menu--toggles': toggles },
     ]"
+    role="menu"
   >
     <slot />
   </ul>

diff --git a/src/components/Navigation/navbar/NavMenuItem.vue b/src/components/Navigation/navbar/NavMenuItem.vue
@@ -6,11 +6,13 @@
       { 'nav-menu-item--dropdown': dropdown },
       { 'nav-menu-item--open': isOpen },
     ]"
+    role="none"
   >
     <router-link
       v-if="route"
       v-slot="{ href, navigate, isExactActive }"
       :to="route"
+      :role="role"
       custom
     >
       <a
@@ -20,6 +22,7 @@
           { 'nav-menu-item__inner--icon-only': icon && !text },
           { 'nav-menu-item__inner--active': active || isExactActive },
         ]"
+        v-bind="ariaAttrs"
         @click="activate($event, navigate)"
       >
         <slot name="text">
@@ -35,7 +38,11 @@
           'nav-menu-item__inner',
           { 'nav-menu-item__inner--active': active || isOpen },
         ]"
+        :role="role"
         tabindex="0"
+        :aria-haspopup="dropdown"
+        :aria-expanded="isOpen"
+        v-bind="ariaAttrs"
         @click="activate"
         @keyup.enter="activate"
       >
@@ -92,12 +99,30 @@ export default {
       required: false,
       default: false,
     },
+    role: {
+      type: String,
+      required: false,
+      default: 'menuitem',
+    },
+    aria: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
 
   data: () => ({
     isOpen: false,
   }),
 
+  computed: {
+    ariaAttrs() {
+      return this.aria
+        ? Object.fromEntries(Object.entries(this.aria).map(([k, v]) => [`aria-${k}`, v]))
+        : null;
+    },
+  },
+
   watch: {
     isOpen() {
       this.$emit('open');

diff --git a/src/components/Navigation/toolbar/ViewToggle.vue b/src/components/Navigation/toolbar/ViewToggle.vue
@@ -8,6 +8,11 @@
       v-for="view in views"
       :key="view.key"
       v-tooltip="$t('tooltip.changeView', { view: view.name })"
+      :aria="{
+        label: $t('tooltip.changeView', { view: view.name }),
+        checked: view.active,
+      }"
+      role="menuitemradio"
       v-bind="view"
     />
   </nav-menu>