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 />
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 22bb514..b243f53 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -36,6 +36,7 @@
}
},
"appHeader": {
+ "applicationHeader": "Application header",
"bmcSystemManagement": "BMC System Management",
"health": "Health",
"logOut": "Log out",
@@ -56,6 +57,7 @@
"managePowerUsage": "@:appPageTitle.managePowerUsage",
"networkSettings": "@:appPageTitle.networkSettings",
"overview": "@:appPageTitle.overview",
+ "primaryNavigation": "Primary navigation",
"rebootBmc": "@:appPageTitle.rebootBmc",
"sensors": "@:appPageTitle.sensors",
"serverLed": "@:appPageTitle.serverLed",
diff --git a/tests/unit/AppHeader.spec.js b/tests/unit/AppHeader.spec.js
index 6dea960..52e4543 100644
--- a/tests/unit/AppHeader.spec.js
+++ b/tests/unit/AppHeader.spec.js
@@ -1,62 +1,72 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount, createLocalVue, createWrapper } from '@vue/test-utils';
import Vue from 'vue';
+import Vuex from 'vuex';
import AppHeader from '@/components/AppHeader';
-import $store from '@/store';
-import { BootstrapVue } from 'bootstrap-vue';
+
+// Silencing warnings about undefined Bootsrap-vue components
+Vue.config.silent = true;
+const localVue = createLocalVue();
+localVue.use(Vuex);
describe('AppHeader.vue', () => {
- let wrapper;
- let spy;
- Vue.use(BootstrapVue);
+ const actions = {
+ 'global/getHostStatus': sinon.spy(),
+ 'eventLog/getEventLogData': sinon.spy()
+ };
- wrapper = mount(AppHeader, {
+ const store = new Vuex.Store({ actions });
+ const wrapper = shallowMount(AppHeader, {
+ store,
+ localVue,
mocks: {
- $t: key => key,
- $store
+ $t: key => key
}
});
+ // Reset spy for each test. Otherwise mutiple actions
+ // are dispatched in each test
beforeEach(() => {
- spy = sinon.spy($store.dispatch);
+ store.dispatch = sinon.spy();
});
- describe('Component exists', () => {
- it('should check if AppHeader exists', async () => {
- expect(wrapper.exists());
+ describe('UI', () => {
+ it('should check if AppHeader exists', () => {
+ expect(wrapper.exists()).to.be.true;
+ });
+
+ it('should check if the skip navigation link exists', () => {
+ expect(wrapper.get('.link-skip-nav').exists()).to.be.true;
+ });
+
+ it('refresh button click should emit refresh event', async () => {
+ wrapper.get('#app-header-refresh').trigger('click');
+ await wrapper.vm.$nextTick();
+ expect(wrapper.emitted().refresh).to.exist;
+ });
+
+ it('nav-trigger button click should emit toggle:navigation event', async () => {
+ const rootWrapper = createWrapper(wrapper.vm.$root);
+ wrapper.get('#app-header-trigger').trigger('click');
+ await wrapper.vm.$nextTick();
+ expect(rootWrapper.emitted()['toggle:navigation']).to.exist;
+ });
+
+ it('logout button should dispatch authentication/logout', async () => {
+ wrapper.get('#app-header-logout').trigger('click');
+ await wrapper.vm.$nextTick();
+ expect(store.dispatch).calledWith('authentication/logout');
});
});
- describe('AppHeader methods', () => {
- it('should call getHostInfo and dispatch global/getHostStatus', async () => {
+ describe('Methods', () => {
+ it('getHostInfo should dispatch global/getHostStatus', () => {
wrapper.vm.getHostInfo();
- spy('global/getHostStatus');
- expect(spy).to.have.been.calledWith('global/getHostStatus');
+ expect(store.dispatch).calledWith('global/getHostStatus');
});
- it('should call getEvents and dispatch eventLog/getEventLogData', async () => {
+ it('getEvents should dispatch eventLog/getEventLogData', () => {
wrapper.vm.getEvents();
- spy('eventLog/getEventLogData');
- expect(spy).to.have.been.calledWith('eventLog/getEventLogData');
- });
-
- it('should call refresh and emit refresh', async () => {
- spy = sinon.spy(wrapper.vm.$emit);
- wrapper.vm.refresh();
- spy('refresh');
- expect(spy).to.have.been.calledWith('refresh');
- });
-
- it('should call logout and dispatch authentication/logout', async () => {
- wrapper.vm.logout();
- spy('authentication/logout');
- expect(spy).to.have.been.calledWith('authentication/logout');
- });
-
- it('should call toggleNavigation and dispatch toggle:navigation', async () => {
- spy = sinon.spy(wrapper.vm.$root.$emit);
- wrapper.vm.toggleNavigation();
- spy('toggle:navigation');
- expect(spy).to.have.been.calledWith('toggle:navigation');
+ expect(store.dispatch).calledWith('eventLog/getEventLogData');
});
});
});