Merge pull request #838 from bcgov/feature/dss-700-listings-page-acce…

…ssibility Feature/dss 700 listings page accessibility
bcgov · Dec 2, 2024 · b45c52c · b45c52c
2 parents f10fbd8 + e9f6335
commit b45c52c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git 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
@@ -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>
+                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" />
+                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()">
@@ -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/...rc/app/features/components/upload-business-license/upload-business-license.component.html b/...rc/app/features/components/upload-business-license/upload-business-license.component.html
@@ -144,15 +144,15 @@
 </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">
             <app-upload-file #componentRef [extension]="'.csv'" [sizeLimit]="maxFileSize"
                 (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">