diff options
| author | Derick Montague <derick.montague@ibm.com> | 2020-06-27 19:59:17 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-07-02 16:10:47 +0300 |
| commit | de87f67879d02ccf09cea983cdc927f7c9dda2cf (patch) | |
| tree | 4d6e03168bde4d0bf1469facc0c032527506b013 /src | |
| parent | 74466b852979859e4b8c9a448123460098fdbbf5 (diff) | |
| download | webui-vue-de87f67879d02ccf09cea983cdc927f7c9dda2cf.tar.xz | |
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
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Global/LoadingBar.vue | 11 | ||||
| -rw-r--r-- | src/locales/en-US.json | 3 |
2 files changed, 8 insertions, 6 deletions
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> diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 43065348..fd978372 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", |