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
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 08c8256..114d6c9 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 @@
}
.navbar-dark {
.navbar-text,
- .nav-link {
+ .nav-link,
+ .btn-link {
color: $white !important;
+ fill: currentColor;
}
}
+
.nav-item {
fill: $light;
}
@@ -150,6 +160,10 @@
padding: 0;
height: $header-height;
overflow: hidden;
+
+ .btn-link {
+ padding: $spacer / 2;
+ }
}
.navbar-nav {
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index f2f049b..94076de 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -1,7 +1,7 @@
<template>
<div>
<div class="nav-container" :class="{ open: isNavigationOpen }">
- <nav ref="nav">
+ <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
<b-nav vertical>
<b-nav-item to="/">
<icon-overview />