From 5d5a403bf026bf82ae5aca0b072dfb047e8a5e00 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 22:25:37 +0300
Subject: [PATCH] Add role=status + aria-live=polite to SignalR connection
 status badges (a11y)

---
 .../online-board/components/OnlineBoardDetailsPage.tsx | 10 ++++++++--
 .../online-board/components/OnlineBoardSearchPage.tsx  | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
index 6957cf8a..b6e39d45 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.tsx
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
@@ -549,8 +549,14 @@ export const OnlineBoardDetailsPage: FC<OnlineBoardDetailsPageProps> = ({
       >
         <section className="frame">
           <div className="flight-details" data-testid="flight-details">
-            {/* Connection status */}
-            <div className="flight-details__status" data-testid="connection-status">
+            {/* Connection status. Live region announces re-connect state
+                changes (live ⇄ reconnecting ⇄ offline) to screen readers. */}
+            <div
+              className="flight-details__status"
+              data-testid="connection-status"
+              role="status"
+              aria-live="polite"
+            >
               {connectionStatus === "live" && (
                 <span className="connection-badge connection-badge--live">
                   {t("SHARED.CONNECTION-LIVE")}
diff --git a/src/features/online-board/components/OnlineBoardSearchPage.tsx b/src/features/online-board/components/OnlineBoardSearchPage.tsx
index 8973da2f..b61f2e71 100644
--- a/src/features/online-board/components/OnlineBoardSearchPage.tsx
+++ b/src/features/online-board/components/OnlineBoardSearchPage.tsx
@@ -466,8 +466,14 @@ export const OnlineBoardSearchPage: FC<OnlineBoardSearchPageProps> = ({
           />
         }
       >
-        {/* Connection status indicator */}
-        <div className="online-board-search__status" data-testid="connection-status">
+        {/* Connection status indicator. Live region announces re-connect
+            state changes (live ⇄ reconnecting ⇄ offline) to screen readers. */}
+        <div
+          className="online-board-search__status"
+          data-testid="connection-status"
+          role="status"
+          aria-live="polite"
+        >
           {connectionStatus === "live" && (
             <span className="connection-badge connection-badge--live">
               {t("SHARED.CONNECTION-LIVE")}