feat: improve the accessibility

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>

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

src/components/Confetti.vue

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

src/components/Configurator.vue

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

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;
 

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> -->

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>

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>