diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-04-04 22:02:34 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-04-09 17:21:33 +0300 |
commit | 6859203cebe3b6a31d23d55a3555bf36d6c73242 (patch) | |
tree | b0b2229e38ba85cf9f2c065e85cca2b436e53725 /src/components | |
parent | e45f54ba1e5aa26fbdf42dcd907e9f4e777d7b7e (diff) | |
download | webui-vue-6859203cebe3b6a31d23d55a3555bf36d6c73242.tar.xz |
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
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 56 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 2 |
2 files changed, 36 insertions, 22 deletions
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 { diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index f2f049b3..94076de3 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 /> |