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

@@ -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>

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;
   }
 }