Add title attribute to header actions
- Add title attrbute to refresh and avatar icons in app
header.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I89629548ecf5141e3c168fe7b5e1a60d1f86620c
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index bdaca01..aadb8e7 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -11,14 +11,19 @@
id="app-header-trigger"
class="nav-trigger"
aria-hidden="true"
- title="Open navigation"
type="button"
variant="link"
:class="{ open: isNavigationOpen }"
@click="toggleNavigation"
>
- <icon-close v-if="isNavigationOpen" />
- <icon-menu v-if="!isNavigationOpen" />
+ <icon-close
+ v-if="isNavigationOpen"
+ :title="$t('appHeader.titleHideNavigation')"
+ />
+ <icon-menu
+ v-if="!isNavigationOpen"
+ :title="$t('appHeader.titleShowNavigation')"
+ />
</b-button>
<b-navbar-nav>
<b-nav-item to="/" data-test-id="appHeader-container-overview">
@@ -53,7 +58,7 @@
data-test-id="appHeader-button-refresh"
@click="refresh"
>
- <icon-renew />
+ <icon-renew :title="$t('appHeader.titleRefresh')" />
<span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
</b-button>
</li>
@@ -65,7 +70,7 @@
data-test-id="appHeader-container-user"
>
<template v-slot:button-content>
- <icon-avatar />
+ <icon-avatar :title="$t('appHeader.titleProfile')" />
<span class="responsive-text">{{ username }}</span>
</template>
<b-dropdown-item
@@ -195,7 +200,7 @@
.navbar-text,
.nav-link,
.btn-link {
- color: $white !important;
+ color: theme-color('light') !important;
fill: currentColor;
}
}
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 830d46a..7803cac 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -81,7 +81,11 @@
"power": "Power",
"profileSettings": "@:appPageTitle.profileSettings",
"refresh": "Refresh",
- "skipToContent": "Skip to content"
+ "skipToContent": "Skip to content",
+ "titleHideNavigation": "Hide navigation",
+ "titleShowNavigation": "Show navigation",
+ "titleProfile": "Show profile menu",
+ "titleRefresh": "Refresh application data"
},
"appNavigation": {
"accessControl": "Access control",