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/AppNavigation | |
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/AppNavigation')
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 2 |
1 files changed, 1 insertions, 1 deletions
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 /> |