From 4e5f5fb1d1864dd3bd00cb845ee064abb7fdcb86 Mon Sep 17 00:00:00 2001
From: Charaf Rezrazi <81156495+crezra@users.noreply.github.com>
Date: Fri, 2 Sep 2022 18:50:51 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20fixed=20focus=20styles=20f?=
 =?UTF-8?q?or=20better=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/components/Cards/File.vue | 62 +++++++++++++-------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/resources/js/components/Cards/File.vue b/resources/js/components/Cards/File.vue
index a7fec422..e234ee7e 100644
--- 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')