From c760b35dcaba7b413cc2beeaddb3d90b1abfa019 Mon Sep 17 00:00:00 2001
From: Salma Abdelrhman Mostafa Mahmoud
 <salmaabdelrhmanmostafamahmoud@my.uopeople.edu>
Date: Sat, 11 Jul 2026 14:06:50 +0300
Subject: [PATCH] fix(accessibility): add ARIA roles, live regions, and alt
 attributes to banner component (#8888)

Co-authored-by: SalmaAbdelrhmanMostafaMahmoud <salmaabdelrhmanmostafamahmoud@my.uopeople.com>
---
 src/app/core/banner/banner/banner.component.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/core/banner/banner/banner.component.html b/src/app/core/banner/banner/banner.component.html
index 0944495651..3d4df3da01 100644
--- a/src/app/core/banner/banner/banner.component.html
+++ b/src/app/core/banner/banner/banner.component.html
@@ -2,6 +2,8 @@
   <div
     [@banner]
     class="content-wrapper"
+    role="status"
+    aria-live="polite"
   >
     @if (banner.progress$ && (banner.progress$ | async); as progress) {
       @if (progress > 0) {
@@ -14,7 +16,10 @@
     <div class="inner-content-wrapper">
       @if (banner.img) {
         <div class="motivational-img-wrapper">
-          <img [src]="banner.img" />
+          <img
+            [src]="banner.img"
+            alt=""
+          />
         </div>
       }
       <div class="message-wrapper">
@@ -27,7 +32,10 @@
         <!-- -->
         @if (banner.timer$) {
           <div class="message">
-            <strong>{{ banner.timer$ | async | msToMinuteClockString }}</strong> –
+            <strong aria-hidden="true">{{
+              banner.timer$ | async | msToMinuteClockString
+            }}</strong>
+            –
             {{ banner.msg | translate: banner.translateParams }}
           </div>
         } @else {