feat: improve the accessibility

This commit is contained in:
LeoKu 2021-10-17 16:13:09 +08:00
parent 6e28038ef4
commit e9b0323786
8 changed files with 10 additions and 33 deletions

View File

@ -8,7 +8,7 @@
:title="ac.tip"
@click="emit('actionHandler', ac.type)"
>
<img :src="ac.icon" />
<img :src="ac.icon" :alt="ac.tip" />
</div>
</div>
</template>

View File

@ -6,7 +6,7 @@
<div class="title">{{ t('text.codeModalTitle') }}</div>
<div class="close-btn" @click="emit('close')">
<img :src="IconClose" class="icon-close" alt="close" />
<img :src="IconClose" class="icon-close" :alt="t('action.close')" />
</div>
</div>
@ -15,7 +15,7 @@
class="code-scroll-wrapper"
:options="{ suppressScrollX: false }"
>
<pre><code class="code-content" v-html="highlightedCode" /></pre>
<pre><code class="code-content" v-html="highlightedCode"></code></pre>
</PerfectScrollbar>
<button

View File

@ -2,5 +2,5 @@
<canvas
id="confetti"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
/>
></canvas>
</template>

View File

@ -33,7 +33,7 @@
:style="{ background: bgColor }"
class="bg-color"
:class="{ active: bgColor === avatarOption.background.color }"
/>
></div>
</li>
</ul>
</SectionWrapper>

View File

@ -6,7 +6,7 @@
>
<div class="download-modal" @click.stop>
<div class="modal-body">
<div class="img">
<div class="avatar-preview">
<img
alt="vue-color-avatar"
:src="props.imageUrl"
@ -71,7 +71,7 @@ const { t } = useI18n()
height: 100%;
padding: 1.8rem 1.2rem 1rem 1.2rem;
.img {
.avatar-preview {
width: 60%;
margin: 0 auto;

View File

@ -1,12 +1,9 @@
<template>
<!-- <div
class="logo"
:style="{ width: `${props.size}rem`, height: `${props.size}rem` }"
/> -->
<img
style="width: 40px; height: 40px"
:src="LogoSvg"
:style="{ width: `${props.size}rem`, height: `${props.size}rem` }"
alt="logo"
/>
</template>
@ -17,23 +14,3 @@ const props = withDefaults(defineProps<{ size?: number }>(), {
size: 2.5,
})
</script>
<!-- <style lang="scss" scoped>
.logo {
position: relative;
overflow: hidden;
background-color: $color-accent;
border-radius: 25%;
&::after {
position: absolute;
top: -40%;
right: -40%;
width: 100%;
height: 100%;
background-color: $color-secondary;
border-radius: 50%;
content: '';
}
}
</style> -->

View File

@ -11,7 +11,7 @@
rel="nofollow noopener noreferrer"
>
<button class="github-button">
<img :src="IconGitHub" />
<img :src="IconGitHub" alt="GitHub" />
<span class="text">GitHub</span>
</button>
</a>

View File

@ -3,7 +3,7 @@
<slot />
<div class="trigger" @click="isCollapsed ? openSider() : closeSider()">
<img :src="IconRight" class="icon-right" />
<img :src="IconRight" class="icon-right" alt="arrow" />
</div>
</aside>
</template>