fix: improve listing status accessibility

2026-09-11 10:58:30 -04:00
parent 4217009384
commit fef7c0a339
2 changed files with 4 additions and 3 deletions
@@ -15,13 +15,13 @@ const computedBlockers = computed(() => props.blockers.length ? props.blockers :
 </script>

 <template>
-  <article class="admin-listing-status">
+  <article class="admin-listing-status" :aria-labelledby="`listing-title-${listing.id}`">
    <div class="admin-listing-status__identity">
      <p class="catalog-kicker">Listing</p>
-      <h3>{{ listing.productName }}</h3>
+      <h3 :id="`listing-title-${listing.id}`">{{ listing.productName }}</h3>
      <span class="fixture-label">${{ (listing.askingPriceMinor / 100).toFixed(2) }}</span>
    </div>
-    <span class="status" :class="`status--${listing.status.toLowerCase()}`">{{ listing.status }}</span>
+    <span class="status" role="status" :class="`status--${listing.status.toLowerCase()}`">{{ listing.status }}</span>
    <ul v-if="computedBlockers.length" class="admin-listing-status__blockers" aria-label="Publication blockers">
      <li v-for="blocker in computedBlockers" :key="blocker">{{ blocker }}</li>
    </ul>