From bfc70f67bd4c7d4072933b1bab9019e57cfcb88c Mon Sep 17 00:00:00 2001
From: lisaforsyth <lisa.forsyth@dxc.com>
Date: Wed, 27 Nov 2024 16:34:27 -0800
Subject: [PATCH 1/2] Accessibility fixes for listings page dss-700

---
 .gitignore                                                  | 1 +
 .../components/listings-table/listings-table.component.html | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 023472b8..37b01070 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ note
 **/Properties/launchSettings.json
 secrets
 .terraform
+.vs
 docker.env
 backup.sql
 docker-compose.yml
diff --git a/frontend/src/app/features/components/listings-table/listings-table.component.html b/frontend/src/app/features/components/listings-table/listings-table.component.html
index b3ad6fc6..916d0be3 100644
--- a/frontend/src/app/features/components/listings-table/listings-table.component.html
+++ b/frontend/src/app/features/components/listings-table/listings-table.component.html
@@ -5,12 +5,12 @@ <h2 class="title">Listings</h2>
         <p-dropdown [options]="searchColumns" [showClear]="searchColumn !== 'all'" (onClear)="clearSearchBy($event)"
             id="search-by-drd" [(ngModel)]="searchColumn" class="search-by-select"></p-dropdown>
         <span class="p-input-icon-right search-input-container">
-            <button pButton class="search-submit-btn" id="search-submit-btn" (click)="onSearch()"> <i
-                    class="pi pi-search"></i></button>
+            <button pButton class="search-submit-btn" id="search-submit-btn" (click)="onSearch()" aria-label="Search">
+                <i class="pi pi-search" aria-hidden="true"></i></button>
             <button pButton *ngIf="!!searchTerm" id="clear-search-btn" class="colorless p-button-link search-clear-btn"
                 icon="pi pi-times" (click)="onClearSearchBox()"></button>
             <input type="text" id="search-term-inp" (keydown.enter)="onSearch()" class="search-input"
-                placeholder="Search" pInputText [(ngModel)]="searchTerm" />
+                placeholder="Search" pInputText [(ngModel)]="searchTerm" aria-label="Search input" />
         </span>
         <button pButton id="filter-open-btn" class="filter-open-btn p-button-link" [class.colorless]="!isFilterSet"
             icon="pi {{isFilterSet?'pi-filter-fill':'pi-filter'}}" (click)="openFilterSidebar()">

From cb9827f162ee2d6a5d7baf74bb153a08e839dfec Mon Sep 17 00:00:00 2001
From: lisaforsyth <lisa.forsyth@dxc.com>
Date: Mon, 2 Dec 2024 14:40:15 -0800
Subject: [PATCH 2/2] Includes changes for DSS-1028, DSS-1056

---
 .../listings-table.component.html             | 19 +++++++++++--------
 .../upload-business-license.component.html    |  4 ++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/features/components/listings-table/listings-table.component.html b/frontend/src/app/features/components/listings-table/listings-table.component.html
index 916d0be3..2f0f0f1a 100644
--- a/frontend/src/app/features/components/listings-table/listings-table.component.html
+++ b/frontend/src/app/features/components/listings-table/listings-table.component.html
@@ -8,7 +8,7 @@ <h2 class="title">Listings</h2>
             <button pButton class="search-submit-btn" id="search-submit-btn" (click)="onSearch()" aria-label="Search">
                 <i class="pi pi-search" aria-hidden="true"></i></button>
             <button pButton *ngIf="!!searchTerm" id="clear-search-btn" class="colorless p-button-link search-clear-btn"
-                icon="pi pi-times" (click)="onClearSearchBox()"></button>
+                icon="pi pi-times" (click)="onClearSearchBox()" aria-label="Clear search"></button>
             <input type="text" id="search-term-inp" (keydown.enter)="onSearch()" class="search-input"
                 placeholder="Search" pInputText [(ngModel)]="searchTerm" aria-label="Search input" />
         </span>
@@ -86,7 +86,7 @@ <h2 class="title">Listings</h2>
                             *ngIf="this.sort && this.sort.prop === 'platformListingNo' && this.sort.dir === 'asc'"></i>
                     </th>
 
-                    <th style="text-align: center;">Listing Details</th>
+                    <th style="text-align: center;">Details</th>
 
                     <th class="sortable-header" id="addressNormalized_header"
                         [class.sorted]="this.sort && this.sort.prop === 'matchAddressTxt'"
@@ -108,7 +108,7 @@ <h2 class="title">Listings</h2>
 
                     <th class="sortable-header" id="licence_header"
                         [class.sorted]="this.sort && this.sort.prop === 'businessLicenceNo'"
-                        (click)="onSort('businessLicenceNo')">Business Licence on Listing
+                        (click)="onSort('businessLicenceNo')">Listing BL
                         <i class="pi pi-angle-down"
                             *ngIf="this.sort && this.sort.prop === 'businessLicenceNo' && this.sort.dir === 'desc'"></i>
                         <i class="pi pi-angle-up"
@@ -117,7 +117,7 @@ <h2 class="title">Listings</h2>
 
                     <th class="sortable-header" id="licence_matched_header"
                         [class.sorted]="this.sort && this.sort.prop === 'businessLicenceNoMatched'"
-                        (click)="onSort('businessLicenceNoMatched')">Matched Business Licence
+                        (click)="onSort('businessLicenceNoMatched')">Matched BL
                         <i class="pi pi-angle-down"
                             *ngIf="this.sort && this.sort.prop === 'businessLicenceNoMatched' && this.sort.dir === 'desc'"></i>
                         <i class="pi pi-angle-up"
@@ -155,13 +155,16 @@ <h2 class="title">Listings</h2>
                     </td>
                     <td>
                         <div [ngSwitch]="row.listingStatusType" class="align-center status-col">
-                            <div *ngSwitchCase="'N'" class="status-circle status-new" pTooltip="New">
+                            <div *ngSwitchCase="'N'" class="status-circle status-new"
+                                pTooltip="New: Reported for the first time in the most recent monthly data">
                                 N
                             </div>
-                            <div *ngSwitchCase="'A'" class="status-circle status-active" pTooltip="Active">
+                            <div *ngSwitchCase="'A'" class="status-circle status-active"
+                                pTooltip="Active: Reported in the most recent monthly data ">
                                 A
                             </div>
-                            <div *ngSwitchCase="'I'" class="status-circle status-inactive" pTooltip="Inactive">
+                            <div *ngSwitchCase="'I'" class="status-circle status-inactive"
+                                pTooltip="Inactive: Not reported in the most recent monthly data">
                                 I
                             </div>
                             <div *ngIf="row.isLgTransferred" class="status-flag status-reassigned"
@@ -289,7 +292,7 @@ <h2 class="title">Listings</h2>
 </div>
 
 <p-sidebar ngClass="listing-filter p-sidebar-lg" [title]="'Filter Listings'" [(visible)]="isFilterOpened"
-    [closeOnEscape]="false" position="right" [modal]="false">
+    [closeOnEscape]="true" position="right" [modal]="false">
     <ng-template pTemplate="header">
         <strong class="h2-big"> Filter Listings</strong>
     </ng-template>
diff --git a/frontend/src/app/features/components/upload-business-license/upload-business-license.component.html b/frontend/src/app/features/components/upload-business-license/upload-business-license.component.html
index 53496e8a..bc937778 100644
--- a/frontend/src/app/features/components/upload-business-license/upload-business-license.component.html
+++ b/frontend/src/app/features/components/upload-business-license/upload-business-license.component.html
@@ -144,7 +144,7 @@
 </div>
 
 <p-dialog header="Upload Business Licence Data" class="upload-bl-popup" [modal]="true" [closable]="true"
-    [(visible)]="isUploadVisible" [style]="{ width: '640px' }" clo>
+    [(visible)]="isUploadVisible" [style]="{ width: '640px' }">
     <ng-template pTemplate="body">
         <div class="row sub-header">Upload Your Business Licence Data (.CSV File Only)</div>
         <div class="row file-select" [class.has-file]="selectedFile?.name">
@@ -152,7 +152,7 @@
                 (filesSelected)="onFileSelected($event, componentRef)"></app-upload-file>
             <div class="fileName">{{ selectedFile?.name || 'No file selected' }}</div>
             <button pButton class="p-button-transparent clean-btn" (click)="onClear()" *ngIf="selectedFile?.name"
-                icon="pi pi-times" size="small"></button>
+                icon="pi pi-times" aria-label="Clear" size="small"></button>
         </div>
     </ng-template>
     <ng-template pTemplate="footer">