diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 23a57f5..9fb0a86 100644
--- a/src/components/AppHeader.vue
+++ b/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
+ :aria-label="listsStore.error"
+ role="img"
+ >
{{ stampLabel }}
+ :aria-label="stampTitle"
+ role="img"
+ >
@@ -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;