feat: Improve accessibility by adding 'for' attributes to labels and enhancing UI elements in contact details

Author: ashwin31

src/routes/(admin)/admin/contacts/+page.svelte

@@ -2,6 +2,7 @@
     /** @type {{ data: import('./$types').PageData }} */
     let { data } = $props();
     
+    /** @param {string | Date} dateString */
     const formatDate = (dateString) => {
         return new Date(dateString).toLocaleDateString('en-US', {
             year: 'numeric',

src/routes/(app)/app/contacts/+page.svelte

@@ -149,10 +149,11 @@
                 <div class="mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
                     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                         <div>
-                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            <label for="ownerSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                 Owner
                             </label>
                             <select
+                                id="ownerSelect"
                                 bind:value={selectedOwner}
                                 class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                             >
@@ -301,7 +302,39 @@
                                         {formatDate(contact.createdAt)}
                                     </div>
                                 </td>
-                                
+                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                    <div class="flex items-center justify-end gap-2">
+                                        <button
+                                            onclick={() => goto(`/app/contacts/${contact.id}`)}
+                                            class="p-1.5 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                                            title="View contact"
+                                        >
+                                            <Eye class="w-4 h-4" />
+                                        </button>
+                                        <button
+                                            onclick={() => editContact(contact)}
+                                            class="p-1.5 text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                                            title="Edit contact"
+                                        >
+                                            <Edit class="w-4 h-4" />
+                                        </button>
+                                        <form method="POST" action="?/delete" use:enhance class="inline">
+                                            <input type="hidden" name="contactId" value={contact.id} />
+                                            <button
+                                                type="submit"
+                                                class="p-1.5 text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                                                title="Delete contact"
+                                                onclick={(e) => {
+                                                    if (!confirm('Are you sure you want to delete this contact?')) {
+                                                        e.preventDefault();
+                                                    }
+                                                }}
+                                            >
+                                                <Trash2 class="w-4 h-4" />
+                                            </button>
+                                        </form>
+                                    </div>
+                                </td>
                             </tr>
                         {/each}
                     </tbody>

src/routes/(app)/app/contacts/[contactId]/+page.svelte

@@ -123,7 +123,7 @@
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="space-y-4">
               <div>
-                <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</label>
+                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</span>
                 {#if contact.email}
                   <a href="mailto:{contact.email}" class="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1">
                     <Mail class="w-4 h-4" />
@@ -134,7 +134,7 @@
                 {/if}
               </div>
               <div>
-                <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Phone</label>
+                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Phone</span>
                 {#if contact.phone}
                   <a href="tel:{contact.phone}" class="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1">
                     <Phone class="w-4 h-4" />
@@ -145,21 +145,21 @@
                 {/if}
               </div>
               <div>
-                <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Department</label>
+                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Department</span>
                 <p class="text-gray-900 dark:text-white mt-1">{contact.department || 'N/A'}</p>
               </div>
             </div>
             <div class="space-y-4">
               <div>
-                <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Title</label>
+                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Title</span>
                 <p class="text-gray-900 dark:text-white mt-1">{contact.title || 'N/A'}</p>
               </div>
               <div>
-                <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Owner</label>
+                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Owner</span>
                 <p class="text-gray-900 dark:text-white mt-1">{contact.owner?.name || 'N/A'}</p>
               </div>
               <div>
-                <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Created</label>
+                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Created</span>
                 <p class="text-gray-900 dark:text-white mt-1 flex items-center gap-2">
                   <Calendar class="w-4 h-4" />
                   {formatDate(contact.createdAt)}
@@ -169,7 +169,7 @@
           </div>
           {#if contact.description}
             <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-              <label class="text-sm font-medium text-gray-500 dark:text-gray-400">Description</label>
+              <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Description</span>
               <p class="text-gray-900 dark:text-white mt-2">{contact.description}</p>
             </div>
           {/if}
@@ -193,7 +193,7 @@
                         {relationship.account.name}
                       </a>
                       {#if relationship.isPrimary}
-                        <span class="inline-flex px-2 py-0.5 text-xs bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full flex items-center gap-1">
+                        <span class="flex px-2 py-0.5 text-xs bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full items-center gap-1">
                           <Star class="w-3 h-3" />
                           Primary
                         </span>