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
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>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 4306534..fd97837 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -20,7 +20,8 @@
},
"ariaLabel": {
"showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.",
- "tooltip": "Tooltip"
+ "tooltip": "Tooltip",
+ "progressBar": "Page loading progress bar"
},
"calendar": {
"openDatePicker": "Open date picker",