Add role=status + aria-live=polite to SignalR connection status badges (a11y)

2026-04-20 22:25:37 +03:00
parent 22d9fca5b2
commit 5d5a403bf0
2 changed files with 16 additions and 4 deletions
@@ -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")}
@@ -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")}