From 6ce47bc207d6d372c25e9b9862c830308c1f313a Mon Sep 17 00:00:00 2001
From: charantejguniganti <charantejguniganti@gmail.com>
Date: Wed, 13 May 2026 01:17:09 +0530
Subject: [PATCH] fix: convert clickable icons to accessible buttons with
 aria-labels

---
 .../abha-consent-form.component.html                 |  4 +++-
 .../abha-enter-mobile-otp-component.component.html   |  4 +++-
 .../abha-mobile-component.component.html             |  4 +++-
 .../display-abha-card.component.html                 |  5 +++--
 .../download-search-abha.component.html              | 12 +++++++-----
 .../generate-abha-component.component.html           | 12 ++++++++----
 6 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/registrar/abha-components/abha-consent-form/abha-consent-form.component.html b/src/registrar/abha-components/abha-consent-form/abha-consent-form.component.html
index a511ff6..fd3701e 100644
--- a/src/registrar/abha-components/abha-consent-form/abha-consent-form.component.html
+++ b/src/registrar/abha-components/abha-consent-form/abha-consent-form.component.html
@@ -1,6 +1,8 @@
 <div class="title info">
     <h4>CONSENT FORM</h4>
-    <mat-icon class="pull-right close-btn md-24" matDialogClose (click)="closeDialog()" mat-icon-button>close</mat-icon>
+    <button mat-icon-button type="button" aria-label="Close dialog" class="pull-right close-btn md-24" matDialogClose (click)="closeDialog()">
+        <mat-icon>close</mat-icon>
+    </button>
 </div>
 <div mat-dialog-content>
     <form>
diff --git a/src/registrar/abha-components/abha-enter-mobile-otp-component/abha-enter-mobile-otp-component.component.html b/src/registrar/abha-components/abha-enter-mobile-otp-component/abha-enter-mobile-otp-component.component.html
index 9a57615..8f2182e 100644
--- a/src/registrar/abha-components/abha-enter-mobile-otp-component/abha-enter-mobile-otp-component.component.html
+++ b/src/registrar/abha-components/abha-enter-mobile-otp-component/abha-enter-mobile-otp-component.component.html
@@ -1,6 +1,8 @@
 <div class="title info">
   <h4>{{ currentLanguageSet?.verifyMobileOtp }}</h4>
-  <mat-icon class="md-24 pull-right close-btn" matDialogClose (click)="closeDialog()" mat-icon-button>close</mat-icon>
+  <button mat-icon-button type="button" aria-label="Close dialog" class="md-24 pull-right close-btn" matDialogClose (click)="closeDialog()">
+    <mat-icon>close</mat-icon>
+  </button>
 </div>
 <br />
 
diff --git a/src/registrar/abha-components/abha-mobile-component/abha-mobile-component.component.html b/src/registrar/abha-components/abha-mobile-component/abha-mobile-component.component.html
index 0ea9775..4e9f080 100644
--- a/src/registrar/abha-components/abha-mobile-component/abha-mobile-component.component.html
+++ b/src/registrar/abha-components/abha-mobile-component/abha-mobile-component.component.html
@@ -1,6 +1,8 @@
 <div class="title info">
     <h4>{{ currentLanguageSet?.generateABHA }}</h4>
-    <mat-icon class="md-24 pull-right close-btn" matDialogClose (click)="closeDialog()" mat-icon-button>close</mat-icon>
+    <button mat-icon-button type="button" aria-label="Close dialog" class="md-24 pull-right close-btn" matDialogClose (click)="closeDialog()">
+        <mat-icon>close</mat-icon>
+    </button>
 </div>
 <br />
 
diff --git a/src/registrar/abha-components/display-abha-card/display-abha-card.component.html b/src/registrar/abha-components/display-abha-card/display-abha-card.component.html
index 9cc5620..4fa15d2 100644
--- a/src/registrar/abha-components/display-abha-card/display-abha-card.component.html
+++ b/src/registrar/abha-components/display-abha-card/display-abha-card.component.html
@@ -1,7 +1,8 @@
 <div class="title info">
     <h4 class="title"> {{ currentLanguageSet?.aBHACard}} </h4>
-    <mat-icon class="md-24 pull-right close-btn" style="margin-top: 12px;" matDialogClose (click)="closeDialog()"
-        mat-icon-button>close</mat-icon>
+    <button mat-icon-button type="button" aria-label="Close dialog" class="md-24 pull-right close-btn" style="margin-top: 12px;" matDialogClose (click)="closeDialog()">
+        <mat-icon>close</mat-icon>
+    </button>
 </div>
 <div class="overlay" *ngIf="showProgressBar">
     <div class="overlay-content">
diff --git a/src/registrar/abha-components/download-search-abha/download-search-abha.component.html b/src/registrar/abha-components/download-search-abha/download-search-abha.component.html
index 1a4f25b..e2b8c93 100644
--- a/src/registrar/abha-components/download-search-abha/download-search-abha.component.html
+++ b/src/registrar/abha-components/download-search-abha/download-search-abha.component.html
@@ -1,8 +1,8 @@
 <div class="title info">
   <h4>{{ currentLanguageSet.searchAndDownloadAbha }}</h4>
-  <button class="pull-right close-btn"
+  <button mat-icon-button type="button" aria-label="Close dialog" class="pull-right close-btn"
     style="border: unset !important;background-color: unset !important; color: white;" matDialogClose
-    (click)="closeDialogAuth()" mat-icon-button>
+    (click)="closeDialogAuth()">
     <mat-icon class="md-24">close</mat-icon>
   </button>
 </div>
@@ -64,10 +64,12 @@ <h4>{{ currentLanguageSet.searchAndDownloadAbha }}</h4>
               aria-label="Third part of Aadhaar number" aria-describedby="aadhaar-format-hint" />
           </mat-form-field>
 
-          <mat-icon class="eye-icon" (click)="toggleVisibility()"
+          <button mat-icon-button type="button" aria-label="Toggle password visibility" class="eye-icon" (click)="toggleVisibility()"
             style="width: 25px; margin-bottom: -5px; margin-left: 15px;">
-            {{ inputType === 'password' ? 'visibility_off' : 'visibility' }}
-          </mat-icon>
+            <mat-icon>
+              {{ inputType === 'password' ? 'visibility_off' : 'visibility' }}
+            </mat-icon>
+          </button>
           <mat-error style="margin-top: -25px;" *ngIf="isInvalid"> Please enter a valid Aadhaar number</mat-error>
 
         </div>
diff --git a/src/registrar/abha-components/generate-abha-component/generate-abha-component.component.html b/src/registrar/abha-components/generate-abha-component/generate-abha-component.component.html
index 9779c8a..afb8a16 100644
--- a/src/registrar/abha-components/generate-abha-component/generate-abha-component.component.html
+++ b/src/registrar/abha-components/generate-abha-component/generate-abha-component.component.html
@@ -1,6 +1,8 @@
 <div class="title info">
   <h4>Generate ABHA CARD</h4>
-  <mat-icon class="pull-right close-btn md-24" matDialogClose (click)="closeDialog()" mat-icon-button>close</mat-icon>
+  <button mat-icon-button type="button" aria-label="Close dialog" class="pull-right close-btn md-24" matDialogClose (click)="closeDialog()">
+    <mat-icon>close</mat-icon>
+  </button>
 </div>
 <br />
 <div class="col-xs-12 col-sm-12" style="overflow: hidden;" [formGroup]="abhaGenerateForm">
@@ -41,9 +43,11 @@ <h4>Generate ABHA CARD</h4>
             (keydown.backspace)="moveToPrev($event, part2)"  style="text-align: center;"/>
         </mat-form-field>
      
-        <mat-icon class="eye-icon" (click)="toggleVisibility()" style="width: 25px; margin-bottom: -5px;">
-          {{ inputType === 'password' ? 'visibility_off' : 'visibility' }}
-        </mat-icon>
+        <button mat-icon-button type="button" aria-label="Toggle password visibility" class="eye-icon" (click)="toggleVisibility()" style="width: 25px; margin-bottom: -5px;">
+          <mat-icon>
+            {{ inputType === 'password' ? 'visibility_off' : 'visibility' }}
+          </mat-icon>
+        </button>
         <mat-error style="margin-top: -25px;" *ngIf="isInvalid"> Please enter a valid Aadhaar number</mat-error>
         
       </div>