fix: some a11y issues

Author: danielroe

app/components/ConnectorStatus.client.vue

@@ -61,6 +61,8 @@ const ariaLabel = computed(() => {
         v-if="isConnected && avatar"
         :src="avatar"
         :alt="`${npmUser}'s avatar`"
+        width="24"
+        height="24"
         class="w-6 h-6 rounded-full"
       />
       <!-- Status dot (when not connected or no avatar) -->

app/components/HeaderOrgsDropdown.vue

@@ -65,6 +65,7 @@ function handleKeydown(event: KeyboardEvent) {
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
       />
     </NuxtLink>
 
@@ -83,7 +84,7 @@ function handleKeydown(event: KeyboardEvent) {
         </div>
 
         <div v-if="isLoading" class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">Loading...</span>
+          <span class="text-fg-muted text-sm">Loading…</span>
         </div>
 
         <div v-else-if="error" class="px-3 py-4 text-center">
@@ -111,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
             class="link-subtle font-mono text-xs inline-flex items-center gap-1"
           >
             View all
-            <span class="i-carbon-arrow-right w-3 h-3" />
+            <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
           </NuxtLink>
         </div>
       </div>

app/components/HeaderPackagesDropdown.vue

@@ -65,6 +65,7 @@ function handleKeydown(event: KeyboardEvent) {
       <span
         class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
       />
     </NuxtLink>
 
@@ -83,7 +84,7 @@ function handleKeydown(event: KeyboardEvent) {
         </div>
 
         <div v-if="isLoading" class="px-3 py-4 text-center">
-          <span class="text-fg-muted text-sm">Loading...</span>
+          <span class="text-fg-muted text-sm">Loading…</span>
         </div>
 
         <div v-else-if="error" class="px-3 py-4 text-center">
@@ -111,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
             class="link-subtle font-mono text-xs inline-flex items-center gap-1"
           >
             View all
-            <span class="i-carbon-arrow-right w-3 h-3" />
+            <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
           </NuxtLink>
         </div>
       </div>

app/pages/~[username]/orgs.vue

@@ -129,7 +129,7 @@ useSeoMeta({
           :to="`/~${username}`"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
-          <span class="i-carbon-arrow-left w-4 h-4" />
+          <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
           Back to profile
         </NuxtLink>
       </nav>
@@ -210,7 +210,7 @@ useSeoMeta({
               <!-- Stats -->
               <div class="flex items-center gap-4 text-sm text-fg-muted">
                 <div class="flex items-center gap-1.5">
-                  <span class="i-carbon-cube w-4 h-4" />
+                  <span class="i-carbon-cube w-4 h-4" aria-hidden="true" />
                   <span v-if="org.packageCount !== null">
                     {{ org.packageCount }} package{{ org.packageCount === 1 ? '' : 's' }}
                   </span>