src/components/AppHeader.vue

@@ -13,13 +13,6 @@ async function handleLogout() {
   router.push('/login')
 }
 
-const stampLabel = computed(() => {
-  if (!authStore.isAuthenticated) return 'offline'
-  if (listsStore.isSyncing) return 'syncing'
-  if (listsStore.pendingCount > 0) return `${listsStore.pendingCount} pending`
-  return 'synced'
-})
-
 const stampClass = computed(() => {
   if (!authStore.isAuthenticated) return ''
   if (listsStore.pendingCount > 0 || listsStore.isSyncing) return 'stamp-pending'
@@ -46,15 +39,17 @@ const stampTitle = computed(() => {
         v-if="listsStore.error"
         class="stamp stamp-danger"
         :title="listsStore.error"
-        >sync error</span
-      >
+        :aria-label="listsStore.error"
+        role="img"
+      ></span>
       <span
         v-else
         class="stamp"
         :class="stampClass"
         :title="stampTitle"
-        >{{ stampLabel }}</span
-      >
+        :aria-label="stampTitle"
+        role="img"
+      ></span>
       <button v-if="authStore.isAuthenticated" type="button" class="logout" @click="handleLogout">
         Log out
       </button>
@@ -121,6 +116,14 @@ const stampTitle = computed(() => {
   flex-shrink: 0;
 }
 
+.stamp-pending {
+  color: var(--c-warning);
+}
+
+.stamp-synced {
+  color: var(--c-success);
+}
+
 .stamp-danger {
   color: var(--c-danger);
   cursor: help;