fix(a11y): add missing alternative texts (#1143)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

README.md

@@ -26,9 +26,9 @@ Presentation <b>slide</b>s for <b>dev</b>elopers 🧑‍💻👩‍💻👨‍
 <table>
 <tbody>
 <td align="center">
-<img width="2000" height="0"><br>
+<img width="2000" height="0" alt="" aria-hiden><br>
 <sub>Made possible by my <a href="https://github.com/sponsors/antfu">Sponsor Program 💖</a></sub><br>
-<img width="2000" height="0">
+<img width="2000" height="0" alt="" aria-hiden>
 </td>
 </tbody>
 </table>
@@ -93,7 +93,7 @@ This project is made possible by all the sponsors supporting my work:
 
 <p align="center">
   <a href="https://github.com/sponsors/antfu">
-    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
+    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg' alt="Logos from Sponsors" />
   </a>
 </p>
 

demo/composable-vue/components/VueUse.vue

@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <div class="px-2 -mx-2 mt-4 py-2">
-    <img src="https://vueuse.org/favicon.svg" class="h-1em -mb-0.5 mr-2 inline-block align-baseline">
+    <img src="https://vueuse.org/favicon.svg" class="h-1em -mb-0.5 mr-2 inline-block align-baseline" alt="">
     <span class="opacity-50">Avaliable in VueUse: </span><a class="font-mono opacity-75 hover:opacity-100" :href="`https://vueuse.org/${name}`">{{ name }}</a>
   </div>
 </template>

demo/composable-vue/slides.md

@@ -24,7 +24,7 @@ Anthony Fu
 </div>
 
 <div class="abs-bl mx-14 my-12 flex">
-  <img src="https://2020.vueday.it/img/themes/vueday/vueday-logo.png" class="h-8">
+  <img src="https://2020.vueday.it/img/themes/vueday/vueday-logo.png" class="h-8" alt="">
   <div class="ml-3 flex flex-col text-left">
     <div><b>Vue</b>Day</div>
     <div class="text-sm opacity-50">Apr. 29th, 2021</div>
@@ -53,15 +53,15 @@ A fanatical full-time open sourceror.<br>
   <div><a href="https://antfu.me" target="_blank">antfu.me</a></div>
 </div>
 
-<img src="https://antfu.me/avatar.png" class="rounded-full w-40 abs-tr mt-16 mr-12"/>
+<img src="https://antfu.me/avatar.png" class="rounded-full w-40 abs-tr mt-16 mr-12" alt="A comic art image of Anthony Fu"/>
 
 
 ---
 name: Sponsors
 layout: center
 ---
 
-<img class="h-100 -mt-10" src="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.png" /><br>
+<img class="h-100 -mt-10" src="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.png" alt="A list of the sponsor logos" /><br>
 <div class="text-center text-xs opacity-50 -mt-8 hover:opacity-100">
   <a href="https://github.com/sponsors/antfu" target="_blank">
     Sponsor me at GitHub
@@ -82,7 +82,7 @@ layout: center
 
 <div class="grid grid-cols-[3fr_2fr] gap-4">
   <div class="text-center pb-4">
-    <img class="h-50 inline-block" src="https://vueuse.org/favicon.svg">
+    <img class="h-50 inline-block" src="https://vueuse.org/favicon.svg" alt="">
     <div class="opacity-50 mb-2 text-sm">
       Collection of essential Vue Composition Utilities
     </div>
@@ -323,7 +323,7 @@ The `setup()` only runs **once** on component initialization, to construct the r
   <Connections v-click class="mt-4"/>
   <div v-click class="p-4">
     <h3 class="pb-2">SpreadSheet Formula</h3>
-    <img class="h-40" src="https://cdn.wallstreetmojo.com/wp-content/uploads/2019/01/Division-Formula-in-Excel-Example-1-1.png">
+    <img class="h-40" src="https://cdn.wallstreetmojo.com/wp-content/uploads/2019/01/Division-Formula-in-Excel-Example-1-1.png" alt="">
   </div>
 </div>
 
@@ -1143,7 +1143,7 @@ Creates Universal Library for Vue 2 & 3<br><carbon-logo-github class="inline-blo
 import { defineComponent, reactive, ref } from 'vue-demi'
 ```
 
-<img class="h-50 mx-auto" src="https://cdn.jsdelivr.net/gh/vueuse/vue-demi/assets/banner.png" />
+<img class="h-50 mx-auto" src="https://cdn.jsdelivr.net/gh/vueuse/vue-demi/assets/banner.png" alt="" />
 
 
 ---

demo/starter/slides.md

@@ -30,7 +30,7 @@ Presentation slides for developers
   <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
     <carbon:edit />
   </button>
-  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
+  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
     class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
     <carbon-logo-github />
   </a>
@@ -103,7 +103,7 @@ level: 2
 
 Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html)
 
-### Keyboard Shortcuts
+## Keyboard Shortcuts
 
 |     |     |
 | --- | --- |
@@ -117,6 +117,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
   v-click
   class="absolute -bottom-9 -left-7 w-80 opacity-50"
   src="https://sli.dev/assets/arrow-bottom-left.svg"
+  alt=""
 />
 <p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
 
@@ -225,9 +226,9 @@ theme: seriph
 ---
 ```
 
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true">
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
 
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true">
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
 
 </div>
 
@@ -259,20 +260,23 @@ Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-square.png"
+      alt=""
     />
     <img
       v-motion
       :initial="{ y: 500, x: -100, scale: 2 }"
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-circle.png"
+      alt=""
     />
     <img
       v-motion
       :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-triangle.png"
+      alt=""
     />
   </div>
 
@@ -346,7 +350,7 @@ You can create diagrams / graphs from textual descriptions, directly in your Mar
 
 <div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
 
-```mermaid {scale: 0.5}
+```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction

packages/client/builtin/PlantUml.vue

@@ -13,15 +13,18 @@ Alice -> Bob : Hello!
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   code: string
   server: string
   scale?: number
-}>()
+  alt?: string
+}>(), {
+  alt: 'PlantUML diagram',
+})
 
 const uri = computed(() => `${props.server}/svg/${props.code}`)
 </script>
 
 <template>
-  <img alt="PlantUML diagram" :src="uri" :style="{ scale }">
+  <img :src="uri" :style="{ scale }" :alt="alt">
 </template>

packages/client/internals/DrawingControls.vue

@@ -13,6 +13,7 @@ import {
 } from '../logic/drawings'
 import VerticalDivider from './VerticalDivider.vue'
 import Draggable from './Draggable.vue'
+import HiddenText from './HiddenText.vue'
 
 function undo() {
   drauu.undo()
@@ -40,24 +41,30 @@ function setBrushColor(color: typeof brush.color) {
     :initial-y="10"
   >
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
+      <HiddenText text="Draw with stylus" />
       <carbon:pen />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
+      <HiddenText text="Draw a line" />
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
         <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
       </svg>
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
+      <HiddenText text="Draw an arrow" />
       <carbon:arrow-up-right />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
+      <HiddenText text="Draw an ellipse" />
       <carbon:radio-button />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
+      <HiddenText text="Draw a rectangle" />
       <carbon:checkbox />
     </button>
     <!-- TODO: not sure why it's not working! -->
     <!-- <button class="slidev-icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+      <HiddenText text="Erase" />
       <carbon:erase />
     </button> -->
 
@@ -70,6 +77,7 @@ function setBrushColor(color: typeof brush.color) {
       :class="brush.color === color ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
+      <HiddenText text="Set brush color" />
       <div
         class="w-6 h-6 transition-all transform border border-gray-400/50"
         :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
@@ -80,17 +88,21 @@ function setBrushColor(color: typeof brush.color) {
     <VerticalDivider />
 
     <button class="slidev-icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
+      <HiddenText text="Undo" />
       <carbon:undo />
     </button>
     <button class="slidev-icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
+      <HiddenText text="Redo" />
       <carbon:redo />
     </button>
     <button class="slidev-icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
+      <HiddenText text="Delete" />
       <carbon:delete />
     </button>
 
     <VerticalDivider />
     <button class="slidev-icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
+      <HiddenText :text="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" />
       <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
       <carbon:pin v-show="!drawingPinned" />
     </button>
@@ -100,6 +112,7 @@ function setBrushColor(color: typeof brush.color) {
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >
+      <HiddenText :text="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'" />
       <carbon:error v-show="drawingPinned" />
       <carbon:close-outline v-show="!drawingPinned" />
     </button>

packages/client/internals/Editor.vue

@@ -5,6 +5,7 @@ import { activeElement, editorWidth, isInputting, showEditor } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
+import HiddenText from './HiddenText.vue'
 
 const props = defineProps<{
   resize: boolean
@@ -147,9 +148,11 @@ throttledWatch(
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
         <button class="slidev-icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
+          <HiddenText text="Switch to content tab" />
           <carbon:account />
         </button>
         <button class="slidev-icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
+          <HiddenText text="Switch to notes tab" />
           <carbon:align-box-bottom-right />
         </button>
       </div>
@@ -158,9 +161,11 @@ throttledWatch(
       </span>
       <div class="flex-auto" />
       <button class="slidev-icon-btn" @click="openInEditor()">
+        <HiddenText text="Open in editor" />
         <carbon:launch />
       </button>
       <button class="slidev-icon-btn" @click="close">
+        <HiddenText text="Close" />
         <carbon:close />
       </button>
     </div>

packages/client/internals/HiddenText.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <span class="sr-only">{{ text }}</span>
+</template>

packages/client/internals/InfoDialog.vue

@@ -33,7 +33,7 @@ const hasInfo = computed(() => typeof configs.info === 'string')
           <img
             class="w-5 h-5"
             src="../assets/logo.png"
-            alt="Slidev"
+            alt="Slidev logo"
           >
           <div style="color: #2082A6">
             <b>Sli</b>dev