commit de87f67879d02ccf09cea983cdc927f7c9dda2cf
author Derick Montague <derick.montague@ibm.com> Sat Jun 27 11:59:17 2020 -0500
committer Derick Montague <derick.montague@ibm.com> Thu Jul 02 13:10:47 2020 +0000
tree 4d6e03168bde4d0bf1469facc0c032527506b013
parent 74466b852979859e4b8c9a448123460098fdbbf5

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

diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index d972b86..ee33340 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>