public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(a11y): aria-label on icon button

Browse Source
This commit is contained in:
Corentin Thomasset 2022-04-15 16:44:51 +02:00
parent b7193e838b
commit 5f502755d6
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layouts/base.layout.vue
View File

@ -71,13 +71,13 @@ const m = toolsByCategory.map(category => ({
<template v-slot:content> <template v-slot:content>
<div class="navigation"> <div class="navigation">
<n-button :size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary <n-button :size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"> @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed" aria-label="Toogle menu">
<n-icon size="25" :component="Menu2" /> <n-icon size="25" :component="Menu2" />
</n-button> </n-button>
<router-link to="/" #="{ navigate, href }" custom> <router-link to="/" #="{ navigate, href }" custom>
<n-button tag="a" :href="href" @click="navigate" <n-button tag="a" :href="href" @click="navigate"
:size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary> :size="styleStore.isSmallScreen ? 'medium' : 'large'" circle quaternary aria-label="Home">
<n-icon size="25" :component="Home2" /> <n-icon size="25" :component="Home2" />
</n-button> </n-button>
</router-link> </router-link>
@ -91,15 +91,15 @@ const m = toolsByCategory.map(category => ({
Sponsor Sponsor
</n-button> </n-button>
<n-button size="large" circle quaternary tag="a" href="https://github.com/CorentinTh/it-tools" <n-button size="large" circle quaternary tag="a" href="https://github.com/CorentinTh/it-tools"
rel="noopener" target="_blank" v-if="!styleStore.isSmallScreen"> rel="noopener" target="_blank" v-if="!styleStore.isSmallScreen" aria-label="Github repository">
<n-icon size="25" :component="BrandGithub" /> <n-icon size="25" :component="BrandGithub" />
</n-button> </n-button>
<n-button size="large" circle quaternary tag="a" href="https://twitter.com/cthmsst" rel="noopener" <n-button size="large" circle quaternary tag="a" href="https://twitter.com/cthmsst" rel="noopener"
target="_blank" v-if="!styleStore.isSmallScreen"> target="_blank" v-if="!styleStore.isSmallScreen" aria-label="Twitter account">
<n-icon size="25" :component="BrandTwitter" /> <n-icon size="25" :component="BrandTwitter" />
</n-button> </n-button>
<n-button size="large" circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme" <n-button size="large" circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
v-if="!styleStore.isSmallScreen"> v-if="!styleStore.isSmallScreen" aria-label="Toogle theme">
<n-icon size="25" v-if="styleStore.isDarkTheme" :component="Sun" /> <n-icon size="25" v-if="styleStore.isDarkTheme" :component="Sun" />
<n-icon size="25" v-else :component="Moon" /> <n-icon size="25" v-else :component="Moon" />
</n-button> </n-button>