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>