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

2 files changed, 16 insertions, 7 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index bdaca017..aadb8e7f 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 @@ export default {
     .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 830d46a5..7803cac9 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",