From c0b01f3ad5d1c2266affbbcc33cf6c37324fdff1 Mon Sep 17 00:00:00 2001
From: Pavly <pavlysamuelatef@gmail.com>
Date: Fri, 20 Jun 2025 22:16:40 +0300
Subject: [PATCH] Accessibility Enhancment

---
 Interface/src/Components/home/home.component.html   |  6 +++---
 .../src/Components/navbar/navbar.component.html     | 13 +++++++------
 .../src/Components/services/services.component.html | 12 ++++++------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/Interface/src/Components/home/home.component.html b/Interface/src/Components/home/home.component.html
index 881da0fd..d79a1493 100644
--- a/Interface/src/Components/home/home.component.html
+++ b/Interface/src/Components/home/home.component.html
@@ -39,7 +39,7 @@ <h2 class="text-white mb-4" style="font-size: 2.985984rem;">{{ 'HOW_IT_WORKS' |
             <div class="list-progress"><div class="inner"></div></div>
 
             <li>
-              <h4 class="text-white mb-3">{{ 'STEP_REGISTER_TITLE' | translate }}</h4>
+              <h3 class="text-white mb-3">{{ 'STEP_REGISTER_TITLE' | translate }}</h3>
               <p class="text-white">{{ 'STEP_REGISTER_DESC' | translate }}</p>
               <div class="icon-holder">
                 <img src="assets/icons/register-icon.png" class="icon" alt="email-icon">
@@ -47,7 +47,7 @@ <h4 class="text-white mb-3">{{ 'STEP_REGISTER_TITLE' | translate }}</h4>
             </li>
 
             <li>
-              <h4 class="text-white mb-3">{{ 'STEP_FB_TITLE' | translate }}</h4>
+              <h3 class="text-white mb-3">{{ 'STEP_FB_TITLE' | translate }}</h3>
               <p class="text-white">{{ 'STEP_FB_DESC' | translate }}</p>
               <div class="icon-holder">
                 <img src="assets/icons/social-media-icon.png" class="icon" alt="email-icon">
@@ -55,7 +55,7 @@ <h4 class="text-white mb-3">{{ 'STEP_FB_TITLE' | translate }}</h4>
             </li>
 
             <li>
-              <h4 class="text-white mb-3">{{ 'STEP_INSIGHTS_TITLE' | translate }}</h4>
+              <h3 class="text-white mb-3">{{ 'STEP_INSIGHTS_TITLE' | translate }}</h3>
               <p class="text-white">{{ 'STEP_INSIGHTS_DESC' | translate }}</p>
               <div class="icon-holder">
                 <img src="assets/icons/monitor-icon.png" class="icon" alt="email-icon">
diff --git a/Interface/src/Components/navbar/navbar.component.html b/Interface/src/Components/navbar/navbar.component.html
index f102b9ae..d2554c1b 100644
--- a/Interface/src/Components/navbar/navbar.component.html
+++ b/Interface/src/Components/navbar/navbar.component.html
@@ -10,12 +10,13 @@
 
 
   <ul class="navbar-links" [ngClass]="{ 'open': menuOpen }">
-    <div class="language-switcher">
-      <select [value]="getCurrentLanguage()" (change)="switchLanguage($any($event.target).value)">
-        <option value="en">English</option>
-        <option value="ar">العربية</option>
-      </select>
-    </div>
+    <li class="language-switcher">
+        <label for="language-selector">🌐 &nbsp;</label>
+        <select [value]="getCurrentLanguage()" (change)="switchLanguage($any($event.target).value)" id="language-selector">
+          <option value="en">English</option>
+          <option value="ar">العربية</option>
+        </select>
+    </li>
     <li><a routerLink="/home" routerLinkActive="active active-link" [routerLinkActiveOptions]="{ exact: true }">{{ 'HOME' | translate }}</a></li>
     <li><a routerLink="/about" routerLinkActive="active active-link">{{ 'ABOUT_US' | translate }}</a></li>
     <ng-container *ngIf="isLoggedIn; else notLoggedIn">
diff --git a/Interface/src/Components/services/services.component.html b/Interface/src/Components/services/services.component.html
index ca674a9b..ebb186df 100644
--- a/Interface/src/Components/services/services.component.html
+++ b/Interface/src/Components/services/services.component.html
@@ -9,7 +9,7 @@ <h2 class="section-subtitle">{{ 'services.subtitle' | translate }}</h2>
         <div class="service-icon">
           <i class="fa-solid fa-chart-simple" style="color: #20c0bd;"></i>
         </div>
-        <h4 class="service-title">{{ 'services.sentiment' | translate }}</h4>
+        <h3 class="service-title">{{ 'services.sentiment' | translate }}</h3>
       </div>
 
       <!-- Service Item 2 -->
@@ -17,7 +17,7 @@ <h4 class="service-title">{{ 'services.sentiment' | translate }}</h4>
         <div class="service-icon">
           <i class="fa-solid fa-location-crosshairs" style="color: #20c0bd;"></i>
         </div>
-        <h4 class="service-title">{{ 'services.topic' | translate }}</h4>
+        <h3 class="service-title">{{ 'services.topic' | translate }}</h3>
       </div>
 
       <!-- Service Item 3 -->
@@ -25,7 +25,7 @@ <h4 class="service-title">{{ 'services.topic' | translate }}</h4>
         <div class="service-icon">
           <i class="fa-solid fa-lock" style="color: #20c0bd;"></i>
         </div>
-        <h4 class="service-title">{{ 'services.security' | translate }}</h4>
+        <h3 class="service-title">{{ 'services.security' | translate }}</h3>
       </div>
 
       <!-- Service Item 4 -->
@@ -33,7 +33,7 @@ <h4 class="service-title">{{ 'services.security' | translate }}</h4>
         <div class="service-icon">
           <i class="fa-solid fa-leaf" style="color: #20c0bd;"></i>
         </div>
-        <h4 class="service-title">{{ 'services.eco' | translate }}</h4>
+        <h3 class="service-title">{{ 'services.eco' | translate }}</h3>
       </div>
 
       <!-- Service Item 5 -->
@@ -41,7 +41,7 @@ <h4 class="service-title">{{ 'services.eco' | translate }}</h4>
         <div class="service-icon">
           <i class="fa-solid fa-chart-pie" style="color: #20c0bd;"></i>
         </div>
-        <h4 class="service-title">{{ 'services.report' | translate }}</h4>
+        <h3 class="service-title">{{ 'services.report' | translate }}</h3>
       </div>
 
       <!-- Service Item 6 -->
@@ -49,7 +49,7 @@ <h4 class="service-title">{{ 'services.report' | translate }}</h4>
         <div class="service-icon">
           <i class="fa-solid fa-robot" style="color: #20c0bd;"></i>
         </div>
-        <h4 class="service-title">{{ 'services.chatbot' | translate }}</h4>
+        <h3 class="service-title">{{ 'services.chatbot' | translate }}</h3>
       </div>
     </div>
   </div>