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

refactor: added accessibility labels on icon buttons

Browse Source
This commit is contained in:
Corentin Thomasset 2022-07-23 18:55:26 +02:00
parent ab53048d5f
commit 394d085846
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/NavbarButtons.vue
View File

@ -9,6 +9,7 @@
href="https://github.com/CorentinTh/it-tools" href="https://github.com/CorentinTh/it-tools"
rel="noopener" rel="noopener"
target="_blank" target="_blank"
aria-label="IT-Tools' github repository"
> >
<n-icon size="25" :component="BrandGithub" /> <n-icon size="25" :component="BrandGithub" />
</n-button> </n-button>
@ -26,17 +27,18 @@
href="https://twitter.com/ittoolsdottech" href="https://twitter.com/ittoolsdottech"
rel="noopener" rel="noopener"
target="_blank" target="_blank"
aria-label="IT Tools' twitter account"
> >
<n-icon size="25" :component="BrandTwitter" /> <n-icon size="25" :component="BrandTwitter" />
</n-button> </n-button>
</template> </template>
Creator twitter IT Tools' twitter account
</n-tooltip> </n-tooltip>
<router-link to="/about" #="{ navigate, href }" custom> <router-link to="/about" #="{ navigate, href }" custom>
<n-tooltip trigger="hover"> <n-tooltip trigger="hover">
<template #trigger> <template #trigger>
<n-button tag="a" :href="href" circle quaternary size="large" aria-label="Home" @click="navigate"> <n-button tag="a" :href="href" circle quaternary size="large" aria-label="About" @click="navigate">
<n-icon size="25" :component="InfoCircle" /> <n-icon size="25" :component="InfoCircle" />
</n-button> </n-button>
</template> </template>
@ -45,7 +47,7 @@
</router-link> </router-link>
<n-tooltip trigger="hover"> <n-tooltip trigger="hover">
<template #trigger> <template #trigger>
<n-button size="large" circle quaternary @click="isDarkTheme = !isDarkTheme"> <n-button size="large" circle quaternary aria-label="Toggle dark/light mode" @click="isDarkTheme = !isDarkTheme">
<n-icon v-if="isDarkTheme" size="25" :component="Sun" /> <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
<n-icon v-else size="25" :component="Moon" /> <n-icon v-else size="25" :component="Moon" />
</n-button> </n-button>
@ -57,8 +59,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useStyleStore } from '@/stores/style.store'; import { useStyleStore } from '@/stores/style.store';
import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
import { toRefs } from 'vue'; import { toRefs } from 'vue';
import { BrandGithub, BrandTwitter, Moon, Sun, InfoCircle } from '@vicons/tabler';
const styleStore = useStyleStore(); const styleStore = useStyleStore();
const { isDarkTheme } = toRefs(styleStore); const { isDarkTheme } = toRefs(styleStore);