diff options
Diffstat (limited to 'src/components/AppHeader')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 56 |
1 files changed, 35 insertions, 21 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 { |