Merge pull request #9411 from marcellamaki/add-aria-label-to-immersiv…

…e-toolbar-icon-buttons Adds aria labels to immersive toolbar buttons for back and close
learningequality · May 16, 2022 · 0b2c575 · 0b2c575
2 parents 2a336b2 + 9950699
commit 0b2c575
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/kolibri/core/assets/src/views/ImmersiveToolbar.vue b/kolibri/core/assets/src/views/ImmersiveToolbar.vue
@@ -21,20 +21,23 @@
         <!-- TODO add aria label? -->
         <KIconButton
           v-if="icon === 'close'"
+          :ariaLabel="coreString('closeAction')"
           icon="close"
           :color="$themeTokens.textInverted"
           tabindex="-1"
         />
         <KIconButton
           v-else
           icon="back"
+          :ariaLabel="coreString('goBackAction')"
           :color="$themeTokens.textInverted"
         />
       </router-link>
 
       <span v-else>
         <KIconButton
           v-if="icon === 'close'"
+          :ariaLabel="coreString('closeAction')"
           icon="close"
           :color="$themeTokens.textInverted"
           tabindex="-1"
@@ -43,6 +46,7 @@
         <KIconButton
           v-else
           icon="back"
+          :ariaLabel="coreString('goBackAction')"
           :color="$themeTokens.textInverted"
           @click="$emit('navIconClick')"
         />
@@ -57,12 +61,14 @@
 
   import UiToolbar from 'kolibri.coreVue.components.UiToolbar';
   import { validateLinkObject } from 'kolibri.utils.validators';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
   export default {
     name: 'ImmersiveToolbar',
     components: {
       UiToolbar,
     },
+    mixins: [commonCoreStrings],
     props: {
       appBarTitle: {
         type: String,