From e9b03237861ab40a90d528fa6fe5de5e8ca792f5 Mon Sep 17 00:00:00 2001
From: LeoKu <czc12580520@gmail.com>
Date: Sun, 17 Oct 2021 16:13:09 +0800
Subject: [PATCH] feat: improve the accessibility

---
 src/components/ActionBar.vue     |  2 +-
 src/components/CodeModal.vue     |  4 ++--
 src/components/Confetti.vue      |  2 +-
 src/components/Configurator.vue  |  2 +-
 src/components/DownloadModal.vue |  4 ++--
 src/components/Logo.vue          | 25 +------------------------
 src/layouts/Header.vue           |  2 +-
 src/layouts/Sider.vue            |  2 +-
 8 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index c62388d..93aea4d 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -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>
diff --git a/src/components/CodeModal.vue b/src/components/CodeModal.vue
index aaa4bcd..32dba35 100644
--- a/src/components/CodeModal.vue
+++ b/src/components/CodeModal.vue
@@ -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
diff --git a/src/components/Confetti.vue b/src/components/Confetti.vue
index 54eaf45..4646d63 100644
--- a/src/components/Confetti.vue
+++ b/src/components/Confetti.vue
@@ -2,5 +2,5 @@
   <canvas
     id="confetti"
     style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
-  />
+  ></canvas>
 </template>
diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue
index 15ef9c1..4e12293 100644
--- a/src/components/Configurator.vue
+++ b/src/components/Configurator.vue
@@ -33,7 +33,7 @@
               :style="{ background: bgColor }"
               class="bg-color"
               :class="{ active: bgColor === avatarOption.background.color }"
-            />
+            ></div>
           </li>
         </ul>
       </SectionWrapper>
diff --git a/src/components/DownloadModal.vue b/src/components/DownloadModal.vue
index d45bc84..d6afe9f 100644
--- a/src/components/DownloadModal.vue
+++ b/src/components/DownloadModal.vue
@@ -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;
 
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index 2b0335f..820ff4d 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -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> -->
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index a9d757a..831bd30 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -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>
diff --git a/src/layouts/Sider.vue b/src/layouts/Sider.vue
index d34c81d..b401d9b 100644
--- a/src/layouts/Sider.vue
+++ b/src/layouts/Sider.vue
@@ -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>