From e65d392db7fcb061ffcefd4e0dd6844039f6f890 Mon Sep 17 00:00:00 2001
From: Shubham Kumar <shubham.24bcs10320@sst.scaler.com>
Date: Thu, 18 Dec 2025 02:09:06 +0530
Subject: [PATCH] fix: Hide language icon button on large screens, show only on
 small screens (#2910)

Add accessibility attributes to the language button
---
 src/app/core/shell/toolbar/toolbar.component.html | 11 +++++++++--
 src/app/core/shell/toolbar/toolbar.component.scss | 11 +++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html
index 369e5918a..d267676a7 100644
--- a/src/app/core/shell/toolbar/toolbar.component.html
+++ b/src/app/core/shell/toolbar/toolbar.component.html
@@ -90,8 +90,15 @@
     <mifosx-language-selector class="ml-1 language hide-lt-md" tabindex="0"></mifosx-language-selector>
   </div>
 
-  <button mat-icon-button [matMenuTriggerFor]="languageMenu" tabindex="0">
-    <mat-icon class="lg-icon">language</mat-icon>
+  <button
+    mat-icon-button
+    [matMenuTriggerFor]="languageMenu"
+    class="show-lt-md"
+    tabindex="0"
+    [attr.aria-label]="'labels.menus.Language Selector' | translate"
+    matTooltip="{{ 'labels.menus.Language Selector' | translate }}"
+  >
+    <mat-icon>language</mat-icon>
   </button>
 
   <div #notifications>
diff --git a/src/app/core/shell/toolbar/toolbar.component.scss b/src/app/core/shell/toolbar/toolbar.component.scss
index e9be12611..ed74e0241 100644
--- a/src/app/core/shell/toolbar/toolbar.component.scss
+++ b/src/app/core/shell/toolbar/toolbar.component.scss
@@ -58,15 +58,14 @@
   }
 }
 
-// Show icon on small screens
-.lg-icon {
+// Show language icon button only on small screens (when full selector is hidden)
+.show-lt-md {
   display: none;
 }
 
-@media (width <= 959px) {
-  .lg-icon {
-    display: block;
-    margin-left: 5px;
+@media (width <= 768px) {
+  .show-lt-md {
+    display: inline-flex;
   }
 }