From 6859203cebe3b6a31d23d55a3555bf36d6c73242 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Sat, 4 Apr 2020 14:02:34 -0500
Subject: Resolve header and nav accessibility violations

- Add aria-label to nav sections in app-header and app-nav to meet
accessibility guidelines. When application has multiple nav elements
an aria-label is required to help screen readers identify the elements
- Remove b-nav child of b-nav-bar in app-header to fix invalid markup
generated by Bootstrap-vue components. Components were not used as
expected by the component library
- Replace b-nav-item with HTML <li> elements using nav-item css classes
in order to use button elements. Bootstrap-vue generates <a> elements
which is not the semantic HTML element to use for items that are not
links to other sections of the application.
- Removed aria-expanded and nav-open class from nav-trigger button
- Update appHeader unit test

Used a TDD approach to write all tests to fail and then updated the
methods and actions to make the tests suceed. Each test resulting in
a dispatched action should be called once only and with the expected
action.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I18af3727708526f814b7ceb77a0c28fda9f3d9bd
---
 src/components/AppHeader/AppHeader.vue | 56 +++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 21 deletions(-)

(limited to 'src/components/AppHeader/AppHeader.vue')

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 08c82565..114d6c9d 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -1,19 +1,23 @@
 <template>
   <div>
-    <a class="link-skip-nav btn btn-light" href="#main-content">
-      {{ $t('appHeader.skipToContent') }}
-    </a>
     <header id="page-header">
-      <b-navbar variant="dark" type="dark">
+      <a role="link" class="link-skip-nav btn btn-light" href="#main-content">
+        {{ $t('appHeader.skipToContent') }}
+      </a>
+
+      <b-navbar
+        variant="dark"
+        type="dark"
+        :aria-label="$t('appHeader.applicationHeader')"
+      >
         <!-- Left aligned nav items -->
         <b-button
+          id="app-header-trigger"
           class="nav-trigger"
           aria-hidden="true"
           title="Open navigation"
           type="button"
           variant="link"
-          :aria-expanded="isNavigationOpen"
-          :class="{ 'nav-open': isNavigationOpen }"
           @click="toggleNavigation"
         >
           <icon-close v-if="isNavigationOpen" />
@@ -24,24 +28,27 @@
         </b-navbar-nav>
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
-          <b-nav>
-            <b-nav-item>
-              {{ $t('appHeader.health') }}
-              <status-icon :status="healthStatusIcon" />
-            </b-nav-item>
-            <b-nav-item>
-              {{ $t('appHeader.power') }}
-              <status-icon :status="hostStatusIcon" />
-            </b-nav-item>
-            <b-nav-item @click="refresh">
+          <b-nav-item>
+            {{ $t('appHeader.health') }}
+            <status-icon :status="healthStatusIcon" />
+          </b-nav-item>
+          <b-nav-item>
+            {{ $t('appHeader.power') }}
+            <status-icon :status="hostStatusIcon" />
+          </b-nav-item>
+          <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
+          <li class="nav-item">
+            <b-button id="app-header-refresh" variant="link" @click="refresh">
               {{ $t('appHeader.refresh') }}
               <icon-renew />
-            </b-nav-item>
-            <b-nav-item @click="logout">
+            </b-button>
+          </li>
+          <li>
+            <b-button id="app-header-logout" variant="link" @click="logout">
               {{ $t('appHeader.logOut') }}
               <icon-avatar />
-            </b-nav-item>
-          </b-nav>
+            </b-button>
+          </li>
         </b-navbar-nav>
       </b-navbar>
     </header>
@@ -138,10 +145,13 @@ export default {
 }
 .navbar-dark {
   .navbar-text,
-  .nav-link {
+  .nav-link,
+  .btn-link {
     color: $white !important;
+    fill: currentColor;
   }
 }
+
 .nav-item {
   fill: $light;
 }
@@ -150,6 +160,10 @@ export default {
   padding: 0;
   height: $header-height;
   overflow: hidden;
+
+  .btn-link {
+    padding: $spacer / 2;
+  }
 }
 
 .navbar-nav {
-- 
cgit v1.2.3