1 files changed, 52 insertions, 32 deletions
diff --git a/server/sonar-web/src/main/js/app/components/GitHubSynchronisationWarning.tsx b/server/sonar-web/src/main/js/app/components/GitHubSynchronisationWarning.tsx
index 5d7cb2544c7..b9ee787e9ba 100644
--- a/server/sonar-web/src/main/js/app/components/GitHubSynchronisationWarning.tsx
+++ b/server/sonar-web/src/main/js/app/components/GitHubSynchronisationWarning.tsx
@@ -31,7 +31,7 @@ import './SystemAnnouncement.css';
 
 interface LastSyncProps {
   short?: boolean;
-  info: Required<GithubStatusEnabled>['lastSync'];
+  info: GithubStatusEnabled['lastSync'];
 }
 
 interface GitHubSynchronisationWarningProps {
@@ -39,6 +39,9 @@ interface GitHubSynchronisationWarningProps {
 }
 
 function LastSyncAlert({ info, short }: LastSyncProps) {
+  if (info === undefined) {
+    return null;
+  }
   const { finishedAt, errorMessage, status, summary } = info;
 
   const formattedDate = finishedAt ? formatDistance(new Date(finishedAt), new Date()) : '';
@@ -73,25 +76,33 @@ function LastSyncAlert({ info, short }: LastSyncProps) {
     );
   }
 
-  return status === TaskStatuses.Success ? (
-    <Alert variant="success">
-      {translateWithParameters(
-        'settings.authentication.github.synchronization_successful',
-        formattedDate
+  return (
+    <Alert
+      variant={status === TaskStatuses.Success ? 'success' : 'error'}
+      role="alert"
+      aria-live="assertive"
+    >
+      {status === TaskStatuses.Success ? (
+        <>
+          {translateWithParameters(
+            'settings.authentication.github.synchronization_successful',
+            formattedDate
+          )}
+          <br />
+          {summary ?? ''}
+        </>
+      ) : (
+        <React.Fragment key={`synch-alert-${finishedAt}`}>
+          <div>
+            {translateWithParameters(
+              'settings.authentication.github.synchronization_failed',
+              formattedDate
+            )}
+          </div>
+          <br />
+          {errorMessage ?? ''}
+        </React.Fragment>
       )}
-      <br />
-      {summary ?? ''}
-    </Alert>
-  ) : (
-    <Alert variant="error">
-      <div>
-        {translateWithParameters(
-          'settings.authentication.github.synchronization_failed',
-          formattedDate
-        )}
-      </div>
-      <br />
-      {errorMessage ?? ''}
     </Alert>
   );
 }
@@ -105,19 +116,28 @@ function GitHubSynchronisationWarning({ short }: GitHubSynchronisationWarningPro
 
   return (
     <>
-      {!short && data?.nextSync && (
-        <>
-          <Alert variant="loading" className="spacer-bottom">
-            {translate(
-              data.nextSync.status === TaskStatuses.Pending
-                ? 'settings.authentication.github.synchronization_pending'
-                : 'settings.authentication.github.synchronization_in_progress'
-            )}
-          </Alert>
-          <br />
-        </>
-      )}
-      {data?.lastSync && <LastSyncAlert short={short} info={data.lastSync} />}
+      <Alert
+        variant="loading"
+        className="spacer-bottom"
+        aria-atomic={true}
+        role="alert"
+        aria-live="assertive"
+        aria-label={
+          data.nextSync === undefined
+            ? translate('settings.authentication.github.synchronization_finish')
+            : ''
+        }
+      >
+        {!short &&
+          data?.nextSync &&
+          translate(
+            data.nextSync.status === TaskStatuses.Pending
+              ? 'settings.authentication.github.synchronization_pending'
+              : 'settings.authentication.github.synchronization_in_progress'
+          )}
+      </Alert>
+
+      <LastSyncAlert short={short} info={data.lastSync} />
     </>
   );
 }