@slidev/client 0.43.6 → 0.43.7

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

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

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

package/internals/HiddenText.vue

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

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

package/internals/NavControls.vue

@@ -8,6 +8,7 @@ import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
+import HiddenText from './HiddenText.vue'
 
 // @ts-expect-error virtual module
 import CustomNavControls from '/@slidev/custom-nav-controls'
@@ -52,19 +53,28 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       @mouseleave="onMouseLeave"
     >
       <button v-if="!isEmbedded" class="slidev-icon-btn" @click="toggleFullscreen">
-        <carbon:minimize v-if="isFullscreen" />
-        <carbon:maximize v-else />
+        <template v-if="isFullscreen">
+          <HiddenText text="Close fullscreen" />
+          <carbon:minimize />
+        </template>
+        <template v-else>
+          <HiddenText text="Enter fullscreen" />
+          <carbon:maximize />
+        </template>
       </button>
 
       <button class="slidev-icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
+        <HiddenText text="Go to previous slide" />
         <carbon:arrow-left />
       </button>
 
       <button class="slidev-icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
+        <HiddenText text="Go to next slide" />
         <carbon:arrow-right />
       </button>
 
       <button v-if="!isEmbedded" class="slidev-icon-btn" title="Slides overview" @click="toggleOverview()">
+        <HiddenText text="Show slide overview" />
         <carbon:apps />
       </button>
 
@@ -74,8 +84,14 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         title="Toggle dark mode"
         @click="toggleDark()"
       >
-        <carbon-moon v-if="isDark" />
-        <carbon-sun v-else />
+        <template v-if="isDark">
+          <HiddenText text="Switch to light theme" />
+          <carbon-moon />
+        </template>
+        <template v-else>
+          <HiddenText text="Switch to dark mode theme" />
+          <carbon-sun />
+        </template>
       </button>
 
       <VerticalDivider />
@@ -92,13 +108,20 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           title="Show presenter cursor"
           @click="showPresenterCursor = !showPresenterCursor"
         >
-          <ph-cursor-fill v-if="showPresenterCursor" />
-          <ph-cursor-duotone v-else class="opacity-50" />
+          <template v-if="showPresenterCursor">
+            <HiddenText text="Hide presenter cursor" />
+            <ph-cursor-fill />
+          </template>
+          <template v-else>
+            <HiddenText text="Show presenter cursor" />
+            <ph-cursor-duotone />
+          </template>
         </button>
       </template>
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
         <button class="slidev-icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
+          <HiddenText v-if="drawingEnabled" :text="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" />
           <carbon:pen />
           <div
             v-if="drawingEnabled"
@@ -122,11 +145,13 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           class="slidev-icon-btn <md:hidden"
           @click="showEditor = !showEditor"
         >
+          <HiddenText :text="showEditor ? 'Hide editor' : 'Show editor'" />
           <carbon:text-annotation-toggle />
         </button>
       </template>
       <template v-if="!__DEV__">
         <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">
+          <HiddenText text="Download as PDF" />
           <carbon:download />
         </button>
       </template>
@@ -136,6 +161,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         class="slidev-icon-btn"
         @click="showInfoDialog = !showInfoDialog"
       >
+        <HiddenText text="Show info" />
         <carbon:information />
       </button>
 
@@ -143,6 +169,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <MenuButton>
           <template #button>
             <button class="slidev-icon-btn">
+              <HiddenText text="Adjust settings" />
               <carbon:settings-adjust />
             </button>
           </template>

package/internals/NotesView.vue

@@ -8,6 +8,7 @@ import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
 import NoteDisplay from './NoteDisplay.vue'
+import HiddenText from './HiddenText.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -57,13 +58,16 @@ function decreaseFontSize() {
     <div class="flex-none border-t border-gray-400 border-opacity-20">
       <div class="flex gap-1 items-center px-6 py-3">
         <button class="slidev-icon-btn" @click="toggleFullscreen">
+          <HiddenText :text="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" />
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
         </button>
         <button class="slidev-icon-btn" @click="increaseFontSize">
+          <HiddenText text="Increase font size" />
           <carbon:zoom-in />
         </button>
         <button class="slidev-icon-btn" @click="decreaseFontSize">
+          <HiddenText text="Decrease font size" />
           <carbon:zoom-out />
         </button>
         <div class="flex-auto" />

package/internals/Presenter.vue

@@ -88,7 +88,7 @@ onMounted(() => {
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container">
       <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;">
+        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
         <div class="flex-auto" />
         <div
           class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"

package/internals/RecordingControls.vue

@@ -5,6 +5,7 @@ import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
 import DevicesList from './DevicesList.vue'
 import MenuButton from './MenuButton.vue'
+import HiddenText from './HiddenText.vue'
 
 const {
   recording,
@@ -40,6 +41,7 @@ onMounted(() => {
     title="Show camera view"
     @click="toggleAvatar"
   >
+    <HiddenText text="Toggle camera view" />
     <carbon:user-avatar />
   </button>
 
@@ -49,12 +51,14 @@ onMounted(() => {
     title="Recording"
     @click="toggleRecording"
   >
+    <HiddenText :text="recording ? 'Stop record video' : 'Record video'" />
     <carbon:stop-outline v-if="recording" />
     <carbon:video v-else />
   </button>
   <MenuButton :disabled="recording">
     <template #button>
       <button class="slidev-icon-btn h-full !text-sm !px-0">
+        <HiddenText text="Select recording device" />
         <carbon:chevron-up class="opacity-50" />
       </button>
     </template>

package/internals/SlidesOverview.vue

@@ -9,6 +9,7 @@ import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
+import HiddenText from './HiddenText.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -157,6 +158,7 @@ watchEffect(() => {
     </div>
   </Transition>
   <button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
+    <HiddenText text="Close" />
     <carbon:close />
   </button>
 </template>

package/layouts/iframe-left.vue

@@ -17,9 +17,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
         :src="url"
         :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
       />
-      <div class="slidev-layout default" v-bind="$attrs">
-        <slot />
-      </div>
+    </div>
+    <div class="slidev-layout default" v-bind="$attrs">
+      <slot />
     </div>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.6",
+  "version": "0.43.7",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,10 +16,10 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.6",
-    "@unocss/reset": "^0.56.4",
-    "@vueuse/core": "^10.4.1",
+    "@unocss/reset": "^0.56.5",
+    "@vueuse/core": "^10.5.0",
     "@vueuse/head": "^2.0.0",
-    "@vueuse/math": "^10.4.1",
+    "@vueuse/math": "^10.5.0",
     "@vueuse/motion": "^2.0.0",
     "codemirror": "^5.65.5",
     "defu": "^6.1.2",
@@ -28,23 +28,23 @@
     "fuse.js": "^6.6.2",
     "js-base64": "^3.7.5",
     "js-yaml": "^4.1.0",
-    "katex": "^0.16.8",
-    "mermaid": "^10.4.0",
+    "katex": "^0.16.9",
+    "mermaid": "^10.5.0",
     "monaco-editor": "^0.37.1",
     "nanoid": "^5.0.1",
     "prettier": "^3.0.3",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.6",
-    "unocss": "^0.56.4",
+    "unocss": "^0.56.5",
     "vite-plugin-windicss": "^1.9.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "vue-starport": "^0.4.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.6",
-    "@slidev/types": "0.43.6"
+    "@slidev/parser": "0.43.7",
+    "@slidev/types": "0.43.7"
   },
   "devDependencies": {
-    "vite": "^4.4.9"
+    "vite": "^4.4.11"
   }
 }