<commit_before><template>

  <UiToolbar
    :title="appBarTitle"
    textColor="white"
    type="clear"
    :showIcon="showIcon"
    :style="{
      height: height + 'px',
      backgroundColor: isFullscreen ? $themeTokens.appBar : $themeTokens.appBarFullscreen,
    }"
    @nav-icon-click="$emit('navIconClick')"
  >
    <template #icon>
      <router-link
        v-if="hasRoute"
        :to="route"
        class="link"
        :class="$computedClass(linkStyle)"
      >
        <!-- TODO add aria label? -->
        <KIconButton
          v-if="icon === 'close'"
          icon="close"
          :color="$themeTokens.textInverted"
          tabindex="-1"
        />
        <KIconButton
          v-else
          icon="back"
          :color="$themeTokens.textInverted"
        />
      </router-link>

      <span v-else>
        <KIconButton
          v-if="icon === 'close'"
          icon="close"
          :color="$themeTokens.textInverted"
          tabindex="-1"
          @click="$emit('navIconClick')"
        />
        <KIconButton
          v-else
          icon="back"
          :color="$themeTokens.textInverted"
          @click="$emit('navIconClick')"
        />
      </span>
    </template>
  </UiToolbar>

</template>


<script>

  import UiToolbar from 'kolibri.coreVue.components.UiToolbar';
  import { validateLinkObject } from 'kolibri.utils.validators';

  export default {
    name: 'ImmersiveToolbar',
    components: {
      UiToolbar,
    },
    props: {
      appBarTitle: {
        type: String,
        required: true,
      },
      height: {
        type: Number,
        required: true,
      },
      icon: {
        type: String,
        required: false,
        default: 'close',
        validator(val) {
          return ['close', 'back'].includes(val);
        },
      },
      showIcon: {
        type: Boolean,
        required: false,
        default: true,
      },
      route: {
        type: Object,
        default: null,
        validator: validateLinkObject,
      },
      isFullscreen: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      hasRoute() {
        return Boolean(this.route);
      },
      linkStyle() {
        const hoverBg = this.isFullscreen
          ? this.$themeTokens.appBarDark
          : this.$themeTokens.appBarFullscreenDark;
        const defaultBg = this.isFullscreen
          ? this.$themeTokens.appBar
          : this.$themeTokens.appBarFullscreen;
        return {
          backgroundColor: defaultBg,
          ':hover': {
            backgroundColor: hoverBg,
          },
        };
      },
    },
  };

</script>


<style lang="scss" scoped>

  // only used when using a link. Otherwise, uses UiToolbar's styles
  .icon {
    // copied from keen
    width: 3em;
    height: 3em;
  }

  .link {
    display: inline-block;
    border-radius: 50%;
    outline-offset: -4px;
  }

</style>
<commit_msg>Adds aria labels to immersive toolbar buttons for back and close<commit_after><template>

  <UiToolbar
    :title="appBarTitle"
    textColor="white"
    type="clear"
    :showIcon="showIcon"
    :style="{
      height: height + 'px',
      backgroundColor: isFullscreen ? $themeTokens.appBar : $themeTokens.appBarFullscreen,
    }"
    @nav-icon-click="$emit('navIconClick')"
  >
    <template #icon>
      <router-link
        v-if="hasRoute"
        :to="route"
        class="link"
        :class="$computedClass(linkStyle)"
      >
        <!-- 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"
          @click="$emit('navIconClick')"
        />
        <KIconButton
          v-else
          icon="back"
          :ariaLabel="coreString('goBackAction')"
          :color="$themeTokens.textInverted"
          @click="$emit('navIconClick')"
        />
      </span>
    </template>
  </UiToolbar>

</template>


<script>

  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,
        required: true,
      },
      height: {
        type: Number,
        required: true,
      },
      icon: {
        type: String,
        required: false,
        default: 'close',
        validator(val) {
          return ['close', 'back'].includes(val);
        },
      },
      showIcon: {
        type: Boolean,
        required: false,
        default: true,
      },
      route: {
        type: Object,
        default: null,
        validator: validateLinkObject,
      },
      isFullscreen: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      hasRoute() {
        return Boolean(this.route);
      },
      linkStyle() {
        const hoverBg = this.isFullscreen
          ? this.$themeTokens.appBarDark
          : this.$themeTokens.appBarFullscreenDark;
        const defaultBg = this.isFullscreen
          ? this.$themeTokens.appBar
          : this.$themeTokens.appBarFullscreen;
        return {
          backgroundColor: defaultBg,
          ':hover': {
            backgroundColor: hoverBg,
          },
        };
      },
    },
  };

</script>


<style lang="scss" scoped>

  // only used when using a link. Otherwise, uses UiToolbar's styles
  .icon {
    // copied from keen
    width: 3em;
    height: 3em;
  }

  .link {
    display: inline-block;
    border-radius: 50%;
    outline-offset: -4px;
  }

</style>

{'fraction_non_alphanumeric': 0.13296844816484224, 'fraction_numerical': 0.0022537025112685126, 'mean_word_length': 1.7811101163831693, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2974282', 'n_tokens_mistral': 1894, 'n_tokens_neox': 1892, 'n_words': 344}