feat(a11y): improve focus state (#116)

components/status/StatusActionButton.vue

@@ -8,6 +8,7 @@ defineProps<{
   groupHover: string
   active?: boolean
   disabled?: boolean
+  as?: string
 }>()
 
 defineOptions({
@@ -16,15 +17,17 @@ defineOptions({
 </script>
 
 <template>
-  <button
-    flex gap-1 items-center rounded :hover="`op100 ${hover}`" group
+  <component
+    :is="as || 'button'"
+    flex gap-1 items-center rounded group
+    :hover="`op100 ${hover}`" focus:outline-none :focus-visible="`op100 ${hover}`"
     :class="active ? [color, 'op100'] : 'op50'"
     v-bind="$attrs"
   >
-    <div rounded-full p2 :group-hover="groupHover">
+    <div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
       <div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
     </div>
 
     <span v-if="text">{{ text }}</span>
-  </button>
+  </component>
 </template>

components/status/StatusActions.vue

@@ -117,13 +117,13 @@ function editStatus() {
 <template>
   <div flex justify-between>
     <CommonTooltip placement="bottom" content="Reply">
-      <RouterLink :to="getStatusPath(status)">
-        <StatusActionButton
-          :text="status.repliesCount"
-          color="text-blue" hover="text-blue" group-hover="bg-blue/10"
-          icon="i-ri:chat-3-line"
-        />
-      </RouterLink>
+      <StatusActionButton
+        as="router-link"
+        :to="getStatusPath(status)"
+        :text="status.repliesCount"
+        color="text-blue" hover="text-blue" group-hover="bg-blue/10"
+        icon="i-ri:chat-3-line"
+      />
     </CommonTooltip>
 
     <CommonTooltip placement="bottom" content="Boost">

components/status/StatusAttachment.vue

@@ -55,21 +55,29 @@ const aspectRatio = computed(() => {
     </audio>
   </template>
   <template v-else>
-    <CommonBlurhash
-      :blurhash="attachment.blurhash"
-      class="status-attachment-image"
-      :src="attachment.url || attachment.previewUrl!"
-      :alt="attachment.description!"
-      :style="{
-        aspectRatio,
-      }"
-      border="~ base"
-      object-cover
+    <button
+      focus:outline-none
+      focus:ring="2 primary inset"
       rounded-lg
       @click="openImagePreviewDialog({
         src: attachment.url || attachment.previewUrl!,
         alt: attachment.description!,
       })"
-    />
+    >
+      <CommonBlurhash
+        :blurhash="attachment.blurhash"
+        class="status-attachment-image"
+        :src="attachment.url || attachment.previewUrl!"
+        :alt="attachment.description!"
+        :style="{
+          aspectRatio,
+        }"
+        border="~ base"
+        rounded-lg
+        h-full
+        w-full
+        object-cover
+      />
+    </button>
   </template>
 </template>

components/status/StatusCard.vue

@@ -68,7 +68,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
 </script>
 
 <template>
-  <div ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" @click="onclick">
+  <div ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
     <div v-if="rebloggedBy" pl8>
       <div flex="~ wrap" gap-1 items-center text-gray:75 text-sm>
         <div i-ri:repeat-fill mr-1 />