提交 e9b03237 编写于 作者: L LeoKu

feat: improve the accessibility

上级 6e28038e
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
:title="ac.tip" :title="ac.tip"
@click="emit('actionHandler', ac.type)" @click="emit('actionHandler', ac.type)"
> >
<img :src="ac.icon" /> <img :src="ac.icon" :alt="ac.tip" />
</div> </div>
</div> </div>
</template> </template>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="title">{{ t('text.codeModalTitle') }}</div> <div class="title">{{ t('text.codeModalTitle') }}</div>
<div class="close-btn" @click="emit('close')"> <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>
</div> </div>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
class="code-scroll-wrapper" class="code-scroll-wrapper"
:options="{ suppressScrollX: false }" :options="{ suppressScrollX: false }"
> >
<pre><code class="code-content" v-html="highlightedCode" /></pre> <pre><code class="code-content" v-html="highlightedCode"></code></pre>
</PerfectScrollbar> </PerfectScrollbar>
<button <button
......
...@@ -2,5 +2,5 @@ ...@@ -2,5 +2,5 @@
<canvas <canvas
id="confetti" id="confetti"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
/> ></canvas>
</template> </template>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
:style="{ background: bgColor }" :style="{ background: bgColor }"
class="bg-color" class="bg-color"
:class="{ active: bgColor === avatarOption.background.color }" :class="{ active: bgColor === avatarOption.background.color }"
/> ></div>
</li> </li>
</ul> </ul>
</SectionWrapper> </SectionWrapper>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
> >
<div class="download-modal" @click.stop> <div class="download-modal" @click.stop>
<div class="modal-body"> <div class="modal-body">
<div class="img"> <div class="avatar-preview">
<img <img
alt="vue-color-avatar" alt="vue-color-avatar"
:src="props.imageUrl" :src="props.imageUrl"
...@@ -71,7 +71,7 @@ const { t } = useI18n() ...@@ -71,7 +71,7 @@ const { t } = useI18n()
height: 100%; height: 100%;
padding: 1.8rem 1.2rem 1rem 1.2rem; padding: 1.8rem 1.2rem 1rem 1.2rem;
.img { .avatar-preview {
width: 60%; width: 60%;
margin: 0 auto; margin: 0 auto;
......
<template> <template>
<!-- <div
class="logo"
:style="{ width: `${props.size}rem`, height: `${props.size}rem` }"
/> -->
<img <img
style="width: 40px; height: 40px" style="width: 40px; height: 40px"
:src="LogoSvg" :src="LogoSvg"
:style="{ width: `${props.size}rem`, height: `${props.size}rem` }" :style="{ width: `${props.size}rem`, height: `${props.size}rem` }"
alt="logo"
/> />
</template> </template>
...@@ -17,23 +14,3 @@ const props = withDefaults(defineProps<{ size?: number }>(), { ...@@ -17,23 +14,3 @@ const props = withDefaults(defineProps<{ size?: number }>(), {
size: 2.5, size: 2.5,
}) })
</script> </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> -->
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
rel="nofollow noopener noreferrer" rel="nofollow noopener noreferrer"
> >
<button class="github-button"> <button class="github-button">
<img :src="IconGitHub" /> <img :src="IconGitHub" alt="GitHub" />
<span class="text">GitHub</span> <span class="text">GitHub</span>
</button> </button>
</a> </a>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<slot /> <slot />
<div class="trigger" @click="isCollapsed ? openSider() : closeSider()"> <div class="trigger" @click="isCollapsed ? openSider() : closeSider()">
<img :src="IconRight" class="icon-right" /> <img :src="IconRight" class="icon-right" alt="arrow" />
</div> </div>
</aside> </aside>
</template> </template>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册