fix: remove v-once and custom aria label

Author: userquin

app/pages/about.vue

@@ -52,7 +52,18 @@ function isExpandable(c: GitHubContributor) {
   )
 }
 
-const contributors = computed(() => data.value ?? [])
+function* mapContributors(
+  c: GitHubContributor[],
+): Generator<GitHubContributor & { expandable: boolean }> {
+  for (const x of c) {
+    yield {
+      ...x,
+      expandable: isExpandable(x),
+    }
+  }
+}
+
+const contributors = computed(() => [...mapContributors(data.value ?? [])])
 
 const roleLabels = computed(
   () =>
@@ -62,25 +73,6 @@ const roleLabels = computed(
     }) as Partial<Record<Role, string>>,
 )
 
-function getAriaLabel(c: GitHubContributor): string {
-  const separator = $t('about.contributors.separator')
-  const role = roleLabels.value[c.role]
-    ? $t('about.contributors.role', { separator, role: roleLabels.value[c.role] })
-    : ''
-  const works_at = c.company
-    ? $t('about.contributors.works_at', { separator, company: c.company })
-    : ''
-  const location = c.location
-    ? $t('about.contributors.location', { separator, location: c.location })
-    : ''
-  return $t('about.contributors.view_profile_detailed', {
-    name: c.name || c.login,
-    role,
-    works_at,
-    location,
-  })
-}
-
 // --- Popover Logic (Global Single Instance with Event Delegation) ---
 // We use a single global popover instance for performance (especially in Firefox with many items).
 // Event delegation on the list handles interactions, avoiding listeners on every item.
@@ -470,16 +462,15 @@ onBeforeUnmount(() => {
               <li
                 v-for="contributor in contributors"
                 :key="contributor.id"
-                v-once
                 class="relative h-12 w-12 list-none group"
                 style="contain: layout style"
               >
                 <LinkBase
-                  v-if="!isExpandable(contributor)"
+                  v-if="!contributor.expandable"
                   :to="contributor.html_url"
+                  :aria-label="contributor.login"
                   no-underline
                   no-new-tab-icon
-                  :aria-label="getAriaLabel(contributor)"
                   class="group relative block h-12 w-12 rounded-lg transition-transform outline-none p-0 bg-transparent"
                 >
                   <img
@@ -501,7 +492,7 @@ onBeforeUnmount(() => {
                   v-else
                   type="button"
                   :data-cid="contributor.id"
-                  :aria-label="getAriaLabel(contributor)"
+                  :aria-label="contributor.login"
                   class="group relative block h-12 w-12 rounded-lg transition-transform duration-200 outline-none p-0 border-none cursor-pointer bg-transparent"
                 >
                   <img
@@ -520,7 +511,6 @@ onBeforeUnmount(() => {
       </section>
     </article>
 
-    <!-- UN ÚNICO nodo de popover, FUERA del v-for -->
     <Transition name="pop">
       <div
         v-if="activeContributor"

i18n/locales/en.json

@@ -946,12 +946,7 @@
       "description": "npmx is fully open source, built by an amazing community of contributors. Join us and let's build the npm browsing experience we always wanted, together.",
       "loading": "Loading contributors...",
       "error": "Failed to load contributors",
-      "avatar": "{name}'s avatar",
-      "view_profile_detailed": "View {name}'s GitHub profile{role}{works_at}{location}",
-      "separator": " — ",
-      "role": "{separator}{role} at npmx.dev",
-      "works_at": "{separator}works at {company}",
-      "location": "{separator}based in {location}"
+      "avatar": "{name}'s avatar"
     },
     "get_involved": {
       "title": "Get involved",

i18n/locales/es.json

@@ -902,12 +902,7 @@
       "description": "npmx es completamente de código abierto, construido por una increíble comunidad de colaboradores. Únete a nosotros y construyamos juntos la experiencia de navegación de npm que siempre quisimos.",
       "loading": "Cargando colaboradores...",
       "error": "Error al cargar colaboradores",
-      "avatar": "avatar de {name}",
-      "view_profile_detailed": "Ver el perfil de GitHub de {name}{role}{works_at}{location}",
-      "separator": " — ",
-      "role": "{separator}{role} en npmx.dev",
-      "works_at": "{separator}trabaja en {company}",
-      "location": "{separator}ubicado en {location}"
+      "avatar": "avatar de {name}"
     },
     "get_involved": {
       "title": "Involúcrate",

i18n/schema.json

@@ -2844,21 +2844,6 @@
             },
             "avatar": {
               "type": "string"
-            },
-            "view_profile_detailed": {
-              "type": "string"
-            },
-            "separator": {
-              "type": "string"
-            },
-            "role": {
-              "type": "string"
-            },
-            "works_at": {
-              "type": "string"
-            },
-            "location": {
-              "type": "string"
             }
           },
           "additionalProperties": false