fix: improve a11y for devtools client (#216)

arashsheyda · web-flow · commit 33a7afcf6d8b · 2026-03-17T20:06:59.000+08:00
diff --git a/packages/rolldown/src/app/components/display/IconButton.vue b/packages/rolldown/src/app/components/display/IconButton.vue
@@ -8,9 +8,11 @@ const props = defineProps<{
 
 <template>
   <button
+    type="button"
     w-8 h-8 rounded-full flex items-center justify-center
     :class="props.active ? 'bg-active op90 text-green-400' : ''"
     hover="bg-active op100" op50 :title="props.title"
+    :aria-label="props.title"
   >
     <slot><div :class="props.classIcon" /></slot>
   </button>
diff --git a/packages/rolldown/src/app/components/display/SafeImage.vue b/packages/rolldown/src/app/components/display/SafeImage.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
-const props = defineProps<{
+const {
+  src,
+  alt = '',
+} = defineProps<{
   src: string
+  alt?: string
 }>()
 
 const success = ref(false)
 
 onMounted(() => {
   const img = new Image()
-  img.src = props.src
+  img.src = src
   img.onload = () => {
     success.value = true
   }
@@ -19,7 +23,8 @@ onMounted(() => {
 <template>
   <img
     v-if="success"
-    :src="props.src"
+    :src="src"
+    :alt="alt"
     @error="success = false"
   >
 </template>
diff --git a/packages/rolldown/src/app/components/panel/SessionSelector.vue b/packages/rolldown/src/app/components/panel/SessionSelector.vue
@@ -40,8 +40,10 @@ function select(session: BuildInfo) {
   <div flex="~ col gap-2">
     <div v-for="session of sessions" :key="session.id" flex="~ row gap-2" relative>
       <component
-        :is="sessionMode === 'list' ? NuxtLink : 'div'"
+        :is="sessionMode === 'list' ? NuxtLink : 'button'"
         :to="`/session/${session.id}`"
+        v-bind="sessionMode !== 'list' ? { type: 'button' } : {}"
+        :aria-label="`Session ${session.id}`"
         border="~ rounded-md"
         :class="sessionMode === 'list' ? ['hover:bg-active', 'border-base'] : [selectedSessionIds.includes(session.id) ? 'border-active' : 'border-base', checkIsDifferentEntry(session) || (selectedSessions.length === 2 && !selectedSessionIds.includes(session.id)) ? 'op50' : 'hover:bg-active']"
         flex="~ col gap-1"
diff --git a/packages/ui/src/components/DisplayCloseButton.vue b/packages/ui/src/components/DisplayCloseButton.vue
@@ -1,7 +1,9 @@
 <template>
   <button
+    type="button"
     w-8 h-8 rounded-full flex items-center justify-center
     hover="bg-active op100" op50 title="Close"
+    aria-label="Close"
   >
     <div i-ph-x />
   </button>
diff --git a/packages/ui/src/components/DisplayIconButton.vue b/packages/ui/src/components/DisplayIconButton.vue
@@ -8,9 +8,12 @@ const props = defineProps<{
 
 <template>
   <button
+    type="button"
     w-8 h-8 rounded-full flex items-center justify-center
     :class="props.active ? 'bg-active op90 text-green-400' : ''"
     hover="bg-active op100" op50 :title="props.title"
+    :aria-label="props.title"
+    :aria-pressed="props.active"
   >
     <slot><div :class="props.classIcon" /></slot>
   </button>
diff --git a/packages/ui/src/components/PanelSideNav.vue b/packages/ui/src/components/PanelSideNav.vue
@@ -37,9 +37,10 @@ const items = computed<SideNavItem[]>(() => {
       <template v-for="item in items" :key="item.title">
         <component
           :is="item.to ? NuxtLink : 'button'"
-          v-bind="item.to ? { to: item.to } : {}"
+          v-bind="item.to ? { to: item.to } : { type: 'button' }"
           v-tooltip="{ placement: 'right', content: item.title }"
           :title="item.title"
+          :aria-label="item.title"
           rounded-full
           p2 hover:bg-active op-fade hover:op100
           flex="~ items-center justify-center"
