From f86d2ed1cd3920d800eb4c5b11fe8ecc70f84547 Mon Sep 17 00:00:00 2001
From: GurukiranP <talk2gurukiran@gmail.com>
Date: Wed, 30 Sep 2026 14:17:20 +0530
Subject: [PATCH 1/2] [MOSIP-44045] [#1355] Fixed the inline input field
 validation issue triggered by clicking the Upload button on the Bulk Upload
 screen.

Signed-off-by: GurukiranP <talk2gurukiran@gmail.com>
---
 .../create/create.component.css               | 38 +++++++++++++++++++
 .../create/create.component.html              | 23 ++++++-----
 .../create/create.component.ts                | 11 ++++++
 3 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
index e05007f5..40c035cb 100644
--- a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
+++ b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
@@ -158,3 +158,41 @@
     margin-left: 8px;
     color: rgba(0, 0, 0, 0.54);
   }
+
+  /* Master data upload form: keep the file section aligned with the form fields above */
+  .masterdata-upload-form .labelfileupload {
+    display: block;
+    margin-left: 10px;
+    margin-top: 8px;
+  }
+
+  .masterdata-upload-form .fileuploadcontainer,
+  .masterdata-upload-form .files-list .single-file {
+    margin-left: 10px;
+  }
+
+  /* On mobile, use the same horizontal span as the mat-form-fields above (100% width with 10px padding) */
+  @media (max-width: 600px) {
+    .masterdata-upload-form .fileuploadcontainer,
+    .masterdata-upload-form .files-list .single-file {
+      margin-right: 10px;
+      width: calc(100% - 20px);
+    }
+  }
+
+  .masterdata-upload-form .file-upload-error {
+    display: block;
+    margin-left: 10px;
+    margin-top: 6px;
+  }
+
+  /* Visible keyboard focus: the native file input is transparent, so outline its drop area instead */
+  .masterdata-upload-form .fileuploadcontainer:focus-within {
+    outline: 2px solid #FF4081;
+    outline-offset: 2px;
+  }
+
+  .masterdata-upload-form mat-label[role="button"]:focus {
+    outline: 2px solid #FF4081;
+    outline-offset: 2px;
+  }
diff --git a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html
index c0db7af7..a4ab40a8 100644
--- a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html
+++ b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.html
@@ -15,7 +15,7 @@ <h3>{{labelanddatas.title |translate}}</h3>
     <div id="myDiv" class="flex-body">
       <mat-card>
         <mat-card-content class="forms-container">
-          <div [formGroup]="uploadForm" class="primary-form" *ngIf="uploadForm">
+          <div [formGroup]="uploadForm" class="primary-form masterdata-upload-form" *ngIf="uploadForm">
             <mat-form-field>
               <mat-label>{{labelanddatas.operation | translate }}</mat-label>
               <mat-select
@@ -49,8 +49,8 @@ <h3>{{labelanddatas.title |translate}}</h3>
                   {{'bulkUpload.validationMessages.tableName.required' | translate}}
                 </mat-error>
               </mat-form-field>                
-              <mat-label style="width:2%" *ngIf="showDownloadBtn" (click)="downloadCSV()" (keypress)="downloadCSV()"><img src="assets/images/download-csv.png" alt="Download CSV" height="18px" width="18px" style="cursor:pointer;" /></mat-label>
-              <mat-label style="width:2%" *ngIf="showDownloadBtn" (click)="downloadExcel()" (keypress)="downloadExcel()"><img src="assets/images/download-excel.png" alt="Download Excel" height="18px" width="18px" style="cursor:pointer;" /></mat-label>
+              <mat-label style="width:2%" *ngIf="showDownloadBtn" role="button" tabindex="0" (click)="downloadCSV()" (keydown.enter)="$event.preventDefault(); downloadCSV()" (keydown.space)="$event.preventDefault(); downloadCSV()"><img src="assets/images/download-csv.png" alt="Download CSV" height="18px" width="18px" style="cursor:pointer;" /></mat-label>
+              <mat-label style="width:2%" *ngIf="showDownloadBtn" role="button" tabindex="0" (click)="downloadExcel()" (keydown.enter)="$event.preventDefault(); downloadExcel()" (keydown.space)="$event.preventDefault(); downloadExcel()"><img src="assets/images/download-excel.png" alt="Download Excel" height="18px" width="18px" style="cursor:pointer;" /></mat-label>
             </div>
             <!-- <div class="custom-file-input">    
               <input type="button" *ngIf="buttonalignment === 'rtl'" value="{{labelanddatas.chooseFile | translate }}" class="browseInput">           
@@ -62,12 +62,14 @@ <h3>{{labelanddatas.title |translate}}</h3>
                 {{'genericerror.fieldValidation' | translate}}
               </mat-error>  
             </div> -->     
-            <label class="labelfileupload" for="fileInput" [style.color]="uploadForm.controls.fileName.touched && uploadForm.controls.fileName.hasError('required') ? 'red' : 'rgba(0, 0, 0, 0.54)'">{{'uploadcertificate.uploadYourFile' | translate}} <span style="color:red;">*</span></label>
+            <label class="labelfileupload" for="fileInput" [style.color]="uploadForm.controls.fileName.touched && uploadForm.controls.fileName.hasError('required') ? 'red' : 'rgba(0, 0, 0, 0.54)'">{{'uploadcertificate.uploadYourFile' | translate}} <span style="color:red;" aria-hidden="true">*</span></label>
               <div class="fileuploadcontainer" appDnd (fileDropped)="onFileDropped($event)" id="fileName">
-              <mat-error  *ngIf="uploadForm.controls.fileName.touched && uploadForm.controls.fileName.hasError('required')">{{ 'bulkUpload.validationMessages.file.required' | translate }}</mat-error>
-              <input (click)="$event.target.value=null" type="file" accept=".xlsx, .xls, .csv" #fileInput id="fileInput" (change)="onFileSelect($event)"/>
+              <input (click)="$event.target.value=null" type="file" accept=".xlsx, .xls, .csv" #fileInput id="fileInput" (change)="onFileSelect($event)"
+                aria-required="true"
+                [attr.aria-invalid]="uploadForm.controls.fileName.touched && uploadForm.controls.fileName.invalid"
+                [attr.aria-describedby]="uploadForm.controls.fileName.touched && uploadForm.controls.fileName.hasError('required') ? 'fileInputError' : null"/>
               <label style="margin-right: 1rem;display: flex;" for="fileInput">
-                <svg id="upload_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24.042"
+                <svg id="upload_icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24.042"
                   viewBox="0 0 24 24.042">
                   <g id="Group_13" data-name="Group 13" transform="translate(3 2.504)">
                     <path id="Path_988" data-name="Path 988"
@@ -81,11 +83,12 @@ <h3>{{labelanddatas.title |translate}}</h3>
                 </svg>
                 <span style="margin-top: 4px;padding-left: 5px; font-size: 14px; font-weight: 600;">{{'uploadcertificate.chooseFile' | translate}}</span>
               </label>
-              </div>  
-              <div class="files-list">
+              </div>
+              <mat-error class="file-upload-error" id="fileInputError" *ngIf="uploadForm.controls.fileName.touched && uploadForm.controls.fileName.hasError('required')">{{ 'bulkUpload.validationMessages.file.required' | translate }}</mat-error>
+              <div class="files-list" aria-live="polite">
               <div class="single-file" *ngIf="uploadForm.controls.fileName.value">
                 <div class="file-icon" style="width: 50px">
-                  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+                  <svg version="1.1" id="Capa_1" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 58 58"
                     style="enable-background:new 0 0 58 58;" xml:space="preserve">
                     <polygon style="fill:#EDEADA;" points="51.5,14 37.5,0 6.5,0 6.5,58 51.5,58 " />
diff --git a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.ts b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.ts
index 7d0f0d30..20e75fb2 100644
--- a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.ts
+++ b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.ts
@@ -142,6 +142,7 @@ export class CreateComponent {
   submit(){
     if (this.uploadForm.invalid) {
     this.uploadForm.markAllAsTouched();
+    this.focusFirstInvalidField();
     return;
     }
     this.auditService.audit(24, 'ADM-333', 'Master Data Upload Form');
@@ -166,6 +167,16 @@ export class CreateComponent {
     });
   }
 
+  // Move focus to the first field with an error so keyboard and screen reader users land on it
+  focusFirstInvalidField() {
+    const fieldElementIds = { operation: 'operation', tableName: 'tableName', fileName: 'fileInput' };
+    const firstInvalidField = Object.keys(fieldElementIds).find(field => this.uploadForm.get(field).invalid);
+    const element = firstInvalidField ? document.getElementById(fieldElementIds[firstInvalidField]) : null;
+    if (element) {
+      element.focus();
+    }
+  }
+
   saveData(){
     let self = this;
     const formData = new FormData();

From f0b7f81c37d3d77548177c467e3c40fe0c8ebde9 Mon Sep 17 00:00:00 2001
From: GurukiranP <talk2gurukiran@gmail.com>
Date: Thu, 1 Oct 2026 17:14:19 +0530
Subject: [PATCH 2/2] css comment for file required error.

Signed-off-by: GurukiranP <talk2gurukiran@gmail.com>
---
 .../bulkupload/masterdataupload/create/create.component.css      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
index 40c035cb..944fea20 100644
--- a/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
+++ b/admin-ui/src/app/features/bulkupload/masterdataupload/create/create.component.css
@@ -180,6 +180,7 @@
     }
   }
 
+  /* File required error below the upload area */
   .masterdata-upload-form .file-upload-error {
     display: block;
     margin-left: 10px;