diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 56 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 2 | ||||
-rw-r--r-- | src/locales/en-US.json | 2 |
3 files changed, 38 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 /> diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 22bb5142..b243f539 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", |