fix: Disconnection banner preserves original disconnect time

frontend/js/websocket.js

@@ -21,7 +21,9 @@ async function reconnectWebsocket () {
 
   connectionState.reconnecting = true
   connectionState.connected = false
-  connectionState.disconnectedAt = Date.now()
+  if (connectionState.disconnectedAt == null) {
+    connectionState.disconnectedAt = Date.now()
+  }
   connectionState.nextReconnectAt = null
 
   try {
@@ -29,9 +31,9 @@ async function reconnectWebsocket () {
     const stream = window.client.eventStream()
     connectionState.connected = true
     connectionState.reconnecting = false
-    connectionState.disconnectedAt = null
     connectionState.nextReconnectAt = null
     for await (const e of stream) {
+      connectionState.disconnectedAt = null
       handleEvent(e)
     }
   } catch (err) {

frontend/resources/vue/components/ConnectionBanner.vue

@@ -1,5 +1,8 @@
 <template>
-    <span id="connection-banner" v-if="!connectionState.connected" class="inline-notification critical user-info-connection" role="status">{{ bannerText }}</span>
+    <span id="connection-banner" v-if="!connectionState.connected" class="inline-notification critical user-info-connection">
+        <span class="connection-banner-sr-only" role="status">{{ staticAnnouncement }}</span>
+        <span aria-hidden="true">{{ bannerText }}</span>
+    </span>
 </template>
 
 <script setup>
@@ -44,6 +47,8 @@ onUnmounted(() => {
   }
 })
 
+const staticAnnouncement = computed(() => t('disconnected-banner-announcement'))
+
 const bannerText = computed(() => {
   const at = connectionState.disconnectedAt
   const next = connectionState.nextReconnectAt
@@ -65,4 +70,15 @@ const bannerText = computed(() => {
     border: 0;
     margin: 0;
 }
+.connection-banner-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
 </style>

lang/combined_output.json

@@ -22,6 +22,7 @@
             "diagnostics.where-to-find-help": "Wo Sie Hilfe finden",
             "disconnected": "Getrennt",
             "disconnected-banner": "Events-Websocket getrennt seit {disconnectedSince}. Erneuter Verbindungsversuch in {reconnectIn}.",
+            "disconnected-banner-announcement": "Events-Websocket getrennt.",
             "disconnected-banner-reconnecting": "Events-Websocket getrennt seit {disconnectedSince}. Verbindungsversuch…",
             "docs": "Dokumentation",
             "language-dialog.browser-languages": "Browser-Sprachen",
@@ -79,6 +80,7 @@
             "diagnostics.where-to-find-help": "Where to find help",
             "disconnected": "Disconnected",
             "disconnected-banner": "Events websocket disconnected since {disconnectedSince}. Trying reconnect in {reconnectIn}.",
+            "disconnected-banner-announcement": "Events websocket disconnected.",
             "disconnected-banner-reconnecting": "Events websocket disconnected since {disconnectedSince}. Trying reconnect…",
             "docs": "Documentation",
             "language-dialog.browser-languages": "Browser languages",
@@ -136,6 +138,7 @@
             "diagnostics.where-to-find-help": "Dónde encontrar ayuda",
             "disconnected": "Desconectado",
             "disconnected-banner": "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión en {reconnectIn}.",
+            "disconnected-banner-announcement": "Websocket de eventos desconectado.",
             "disconnected-banner-reconnecting": "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión…",
             "docs": "Documentación",
             "language-dialog.browser-languages": "Idiomas del navegador",
@@ -193,6 +196,7 @@
             "diagnostics.where-to-find-help": "Dove trovare aiuto",
             "disconnected": "Disconnesso",
             "disconnected-banner": "Websocket eventi disconnesso dalle {disconnectedSince}. Nuovo tentativo tra {reconnectIn}.",
+            "disconnected-banner-announcement": "Websocket eventi disconnesso.",
             "disconnected-banner-reconnecting": "Websocket eventi disconnesso dalle {disconnectedSince}. Tentativo di connessione…",
             "docs": "Documentazione",
             "language-dialog.browser-languages": "Lingue del browser",
@@ -250,6 +254,7 @@
             "diagnostics.where-to-find-help": "在哪里找到帮助",
             "disconnected": "已断开连接",
             "disconnected-banner": "事件 WebSocket 自 {disconnectedSince} 已断开。{reconnectIn} 后尝试重连。",
+            "disconnected-banner-announcement": "事件 WebSocket 已断开。",
             "disconnected-banner-reconnecting": "事件 WebSocket 自 {disconnectedSince} 已断开。正在尝试重连…",
             "docs": "文档",
             "language-dialog.browser-languages": "浏览器语言",

lang/de-DE.yaml

@@ -10,6 +10,7 @@ translations:
   reconnecting: Verbinde erneut…
   disconnected-banner: "Events-Websocket getrennt seit {disconnectedSince}. Erneuter Verbindungsversuch in {reconnectIn}."
   disconnected-banner-reconnecting: "Events-Websocket getrennt seit {disconnectedSince}. Verbindungsversuch…"
+  disconnected-banner-announcement: Events-Websocket getrennt.
   login-button: Login
   raise-issue: Ein Problem melden auf GitHub
   docs: Dokumentation

lang/en.yaml

@@ -12,6 +12,7 @@ translations:
   reconnecting: Reconnecting…
   disconnected-banner: "Events websocket disconnected since {disconnectedSince}. Trying reconnect in {reconnectIn}."
   disconnected-banner-reconnecting: "Events websocket disconnected since {disconnectedSince}. Trying reconnect…"
+  disconnected-banner-announcement: Events websocket disconnected.
   login-button: Login
   logs.title: Logs
   logs.page-description: This is a list of logs from actions that have been executed. You can filter the list by action title.

lang/es-ES.yaml

@@ -10,6 +10,7 @@ translations:
   reconnecting: Reconectando…
   disconnected-banner: "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión en {reconnectIn}."
   disconnected-banner-reconnecting: "Websocket de eventos desconectado desde {disconnectedSince}. Reintentando conexión…"
+  disconnected-banner-announcement: Websocket de eventos desconectado.
   login-button: Iniciar sesión
   raise-issue: Reportar un problema en GitHub
   docs: Documentación

lang/it-IT.yaml

@@ -11,6 +11,7 @@ translations:
   reconnecting: Riconnessione…
   disconnected-banner: "Websocket eventi disconnesso dalle {disconnectedSince}. Nuovo tentativo tra {reconnectIn}."
   disconnected-banner-reconnecting: "Websocket eventi disconnesso dalle {disconnectedSince}. Tentativo di connessione…"
+  disconnected-banner-announcement: Websocket eventi disconnesso.
   login-button: Login
   raise-issue: Segnala un problema su GitHub
   logs.title: Registri

lang/zh-Hans-CN.yaml

@@ -10,6 +10,7 @@ translations:
   reconnecting: 正在重新连接…
   disconnected-banner: "事件 WebSocket 自 {disconnectedSince} 已断开。{reconnectIn} 后尝试重连。"
   disconnected-banner-reconnecting: "事件 WebSocket 自 {disconnectedSince} 已断开。正在尝试重连…"
+  disconnected-banner-announcement: 事件 WebSocket 已断开。
   login-button: 登录
   raise-issue: 在 GitHub 上报告问题
   docs: 文档