feat: add label

Author: MatteoGabriele

app/components/Package/Card.vue

@@ -66,13 +66,18 @@ const numberFormatter = useNumberFormatter()
       </component>
 
       <div class="relative z-1">
-        <input
-          data-package-card-checkbox
-          class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors"
-          type="checkbox"
-          :checked="isSelected"
-          @change="togglePackageSelection(result)"
-        />
+        <label>
+          <span class="sr-only">
+            {{ $t('package.card.select') }}
+          </span>
+          <input
+            data-package-card-checkbox
+            class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors"
+            type="checkbox"
+            :checked="isSelected"
+            @change="togglePackageSelection(result)"
+          />
+        </label>
       </div>
     </header>
 

app/components/Package/TableRow.vue

@@ -203,13 +203,18 @@ const allMaintainersText = computed(() => {
 
     <td class="pe-2 relative z-1">
       <div class="flex items-center justify-center h-full">
-        <input
-          data-package-card-checkbox
-          class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors"
-          type="checkbox"
-          :checked="isSelected"
-          @change="togglePackageSelection(result)"
-        />
+        <label>
+          <span class="sr-only">
+            {{ $t('package.card.select') }}
+          </span>
+          <input
+            data-package-card-checkbox
+            class="md:opacity-0 group-focus-within:opacity-100 checked:opacity-100 md:group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors"
+            type="checkbox"
+            :checked="isSelected"
+            @change="togglePackageSelection(result)"
+          />
+        </label>
       </div>
     </td>
   </tr>

i18n/locales/en.json

@@ -284,7 +284,8 @@
       "published": "Published",
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
-      "license": "License"
+      "license": "License",
+      "select": "Select package"
     },
     "versions": {
       "title": "Versions",

i18n/schema.json

@@ -858,6 +858,9 @@
             },
             "license": {
               "type": "string"
+            },
+            "select": {
+              "type": "string"
             }
           },
           "additionalProperties": false

lunaria/files/en-GB.json

@@ -283,7 +283,8 @@
       "published": "Published",
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
-      "license": "License"
+      "license": "License",
+      "select": "Select package"
     },
     "versions": {
       "title": "Versions",

lunaria/files/en-US.json

@@ -283,7 +283,8 @@
       "published": "Published",
       "weekly_downloads": "Weekly downloads",
       "keywords": "Keywords",
-      "license": "License"
+      "license": "License",
+      "select": "Select package"
     },
     "versions": {
       "title": "Versions",