Merge pull request #48 from BBS-Lab/develop

♿️ fixed focus styles for better accessibility
oneduo · Sep 2, 2022 · 965c6b0 · 965c6b0
2 parents 40e33e0 + 4e5f5fb
commit 965c6b0
Showing 1 changed file with 31 additions and 31 deletions.
diff --git a/resources/js/components/Cards/File.vue b/resources/js/components/Cards/File.vue
@@ -1,13 +1,13 @@
 <template>
   <button
-    class="relative cursor-pointer focus:outline-none focus:ring-1 focus:outline-offset-4 focus:outline-blue-500 focus:rounded-md"
+    class="relative cursor-pointer focus:rounded-md group focus:outline-none"
     :title="name"
   >
     <div
       :class="[
         'relative block aspect-square w-full overflow-hidden rounded-lg hover:shadow-md hover:opacity-75 border border-gray-200/50 dark:border-gray-700/50',
-        'group',
-        selected ? 'outline outline-2 outline-blue-500' : '',
+        'group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-blue-500/50',
+        selected ? 'outline outline-2 outline-blue-500 group-focus-visible:outline-blue-500' : '',
       ]"
     >
       <div
@@ -108,39 +108,39 @@
 import { computed } from 'vue'
 import { DocumentIcon } from '@heroicons/vue/24/outline'
 import {
-    CheckCircleIcon,
-    ExclamationCircleIcon,
-    ExclamationTriangleIcon,
-    PlayIcon,
-    XCircleIcon,
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  PlayIcon,
+  XCircleIcon,
 } from '@heroicons/vue/24/solid'
 import Spinner from '@/components/Elements/Spinner'
 import Entity from '@/types/Entity'
 
 const props = defineProps({
-    file: {
-        type: Entity,
-        default: null,
-    },
-    isUploading: {
-        type: Boolean,
-        default: false,
-    },
-    isUploaded: {
-        type: Boolean,
-        default: null,
-    },
-    uploadRatio: {
-        type: Number,
-        default: null,
-    },
-    selected: {
-        type: Boolean,
-        default: true,
-    },
-    onDeselect: {
-        type: Function,
-    },
+  file: {
+    type: Entity,
+    default: null,
+  },
+  isUploading: {
+    type: Boolean,
+    default: false,
+  },
+  isUploaded: {
+    type: Boolean,
+    default: null,
+  },
+  uploadRatio: {
+    type: Number,
+    default: null,
+  },
+  selected: {
+    type: Boolean,
+    default: true,
+  },
+  onDeselect: {
+    type: Function,
+  },
 })
 
 const isImage = computed(() => props.file.type === 'image')