From de87f67879d02ccf09cea983cdc927f7c9dda2cf Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Sat, 27 Jun 2020 11:59:17 -0500
Subject: Resolve LoadingBar accessibility issue

- Add an aria-label to the b-progress-bar component to meet
accessibility guidelines
- Nest b-progess-bar component in b-progress component in order to add
aria-label to the correct element

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I3b7d23026d4bcdb607fdbad24170e38116a7eb8a
---
 src/components/Global/LoadingBar.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index d972b869..ee333404 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -1,10 +1,11 @@
 <template>
   <transition name="fade">
-    <b-progress
-      v-if="!isLoadingComplete"
-      :value="loadingIndicatorValue"
-      height="0.4rem"
-    />
+    <b-progress v-if="!isLoadingComplete" height="0.4rem">
+      <b-progress-bar
+        :value="loadingIndicatorValue"
+        :aria-label="$t('global.ariaLabel.progressBar')"
+      />
+    </b-progress>
   </transition>
 </template>
 
-- 
cgit v1.2.3