Merge pull request #845 from bcgov/dss-907-frontend-accessibility

dss-907 front end accessibility fixes includes dss-704,705,706
bcgov · Dec 4, 2024 · 79248a5 · 79248a5
2 parents 352fffb + 3f7ad24
commit 79248a5
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 21 deletions.
diff --git a/frontend/src/app/common/layout/layout.component.html b/frontend/src/app/common/layout/layout.component.html
@@ -25,7 +25,7 @@ <h1 class="main-title">Short-Term Rental Data Portal</h1>
 <div class="content" role="main">
     <router-outlet />
 </div>
-<div class="footer do-not-print-it" role="footerinfo">
+<div class="footer do-not-print-it" role="contentinfo">
     <div class="cc">© 2024 Government of British Columbia.</div>
 </div>
 

diff --git a/.../src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html b/.../src/app/features/components/bulk-compliance-notice/bulk-compliance-notice.component.html
@@ -13,8 +13,9 @@ <h4>All fields are required except where stated.</h4>
         styleClass="p-datatable-sm" [(selection)]="selectedListings">
         <ng-template pTemplate="header">
             <tr>
-                <th style="width: 4rem">
-                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                <th style="width: 4rem" aria-labelledby="selectAll_checkbox_header">
+                    <p-tableHeaderCheckbox id="selectAll_checkbox_header"
+                        ariaLabel="'Select or Deselect All'"></p-tableHeaderCheckbox>
                 </th>
                 <th class="sortable-header" id="offeringOrganizationNm_header"
                     [class.sorted]="this.sort && this.sort.prop === 'offeringOrganizationNm'"
@@ -68,7 +69,7 @@ <h4>All fields are required except where stated.</h4>
         <ng-template pTemplate="body" let-listing>
             <tr class="small-text">
                 <td>
-                    <p-tableCheckbox [value]="listing"></p-tableCheckbox>
+                    <p-tableCheckbox [value]="listing" ariaLabel="'Include Listing'"></p-tableCheckbox>
                 </td>
                 <td>{{ listing.offeringOrganizationNm }}</td>
                 <td>
@@ -78,7 +79,8 @@ <h4>All fields are required except where stated.</h4>
                 </td>
                 <td>
                     <p-checkbox [disabled]="!listing.hasAtLeastOneValidHostEmail"
-                        [(ngModel)]="listing.sendNoticeToHosts" [binary]="true" inputId="binary"></p-checkbox>
+                        [(ngModel)]="listing.sendNoticeToHosts" [binary]="true" inputId="binary"
+                        ariaLabel="Send notice to hosts"></p-checkbox>
                 </td>
                 <td [class.no-email]="!listing.hasAtLeastOneValidHostEmail">{{ !listing.hasAtLeastOneValidHostEmail?
                     'Yes':'No' }}</td>

diff --git a/...nd/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html b/...nd/src/app/features/components/bulk-takedown-request/bulk-takedown-request.component.html
@@ -16,8 +16,9 @@ <h4>Takedown Requests for each platform are aggregated into a CSV file and sent
             styleClass="p-datatable-sm" [(selection)]="selectedListings">
             <ng-template pTemplate="header">
                 <tr>
-                    <th style="width: 4rem">
-                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                    <th style="width: 4rem" aria-labelledby="selectAll_checkbox_header">
+                        <p-tableHeaderCheckbox id="selectAll_checkbox_header"
+                            ariaLabel="'Select or Deselect All'"></p-tableHeaderCheckbox>
                     </th>
                     <th class="sortable-header" id="status_header"
                         [class.sorted]="this.sort && this.sort.prop === 'offeringOrganizationNm'"
@@ -60,7 +61,7 @@ <h4>Takedown Requests for each platform are aggregated into a CSV file and sent
             <ng-template pTemplate="body" let-listing>
                 <tr class="small-text">
                     <td>
-                        <p-tableCheckbox [value]="listing"></p-tableCheckbox>
+                        <p-tableCheckbox [value]="listing" ariaLabel="'Include Listing'"></p-tableCheckbox>
                     </td>
                     <td>{{ listing.offeringOrganizationNm }}</td>
                     <td>

diff --git a/frontend/src/app/features/components/delisting-request/delisting-request.component.html b/frontend/src/app/features/components/delisting-request/delisting-request.component.html
@@ -77,7 +77,7 @@ <h4>Add Details of your request</h4>
         <div class="form-group-row-col has-checkbox">
             <p-checkbox formControlName="isWithStandardDetail" [binary]="true" id="isWithStandardDetail"
                 name="isWithStandardDetail" inputId="isWithStandardDetailInput"
-                (onChange)="onWithStandardDetailChanged($event)"></p-checkbox>
+                (onChange)="onWithStandardDetailChanged($event)" ariaLabel="Include standard detail"></p-checkbox>
             <label for="isWithStandardDetail">Remove the listing from platform, do not allow transactions for payments
                 associated with the listing, and cancel all bookings associated with the listing.</label>
         </div>

diff --git a/...ponents/listings-table/aggregated-listings-table/aggregated-listings-table.component.html b/...ponents/listings-table/aggregated-listings-table/aggregated-listings-table.component.html
@@ -5,12 +5,12 @@ <h2 class="title">Aggregated 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"></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()">
@@ -48,7 +48,7 @@ <h2 class="title">Aggregated Listings</h2>
             <div class="rows-info-wrapper">
                 <span class="panel-header-small" [style.visibility]="listingsSelected ? 'visible' : 'hidden'">Selected
                     {{listingsSelected}} items. <button pButton class="p-button-link zero-padding small-text"
-                        (click)="unselectAll()">Unselect All</button>
+                        (click)="unselectAll()" aria-label="Unselect all items in the table">Unselect All</button>
                 </span>
                 <span class="panel-header-small" *ngIf="currentPage">Showing {{ currentPage.itemCount}} of
                     {{currentPage.totalCount || 0}} listings</span>
@@ -103,7 +103,7 @@ <h2 class="title">Aggregated Listings</h2>
                 <tr>
                     <td>
                         <button pButton id="expand-listing-row-{{index}}" class="p-button-transparent round-42"
-                            [pRowToggler]="row">
+                            [pRowToggler]="row" aria-label="Expand or Collapse Listing">
                             <i class="pi" [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                         </button>
                     </td>
@@ -142,9 +142,10 @@ <h2 class="title">Aggregated Listings</h2>
                             <p-table [value]="row.listings" dataKey="rentalListingId">
                                 <ng-template pTemplate="header" let-listing>
                 <tr>
-                    <th>
+                    <th [ariaLabel]="'select-listing'">
                         <p-checkbox [(ngModel)]="row.selected" [inputId]="'group-select-chbx'" [binary]="true"
-                            (onChange)="onGroupRowSelected($event,row)"></p-checkbox>
+                            (onChange)="onGroupRowSelected($event,row)"
+                            [ariaLabel]="'Select or Deselect listing'"></p-checkbox>
 
                     </th>
                     <th>Status</th>
@@ -163,7 +164,7 @@ <h2 class="title">Aggregated Listings</h2>
                 <tr [class.filtered-out]="!listing.filtered">
                     <td>
                         <p-checkbox [(ngModel)]="listing.selected" [binary]="true" [inputId]="'listing-select-chbx'"
-                            (onChange)="onListingRowSelected($event,listing)"></p-checkbox>
+                            (onChange)="onListingRowSelected($event,listing)" ariaLabel="Select listing"></p-checkbox>
                     </td>
                     <td>
                         <div [ngSwitch]="listing.listingStatusType" class="align-center status-col">
@@ -243,7 +244,8 @@ <h2 class="title">Aggregated Listings</h2>
     [rows]="currentPage.pageSize || 25" [totalRecords]="currentPage.totalCount || 0" [showCurrentPageReport]="true"
     [showJumpToPageInput]="true" [showPageLinks]="true" [showFirstLastIcon]="true"
     [rowsPerPageOptions]="[10, 25, 50, 100]"
-    [currentPageReportTemplate]="'Rows per page: {rows} &nbsp; {first}-{last} of {totalRecords}'"></p-paginator>
+    [currentPageReportTemplate]="'Rows per page: {rows} &nbsp; {first}-{last} of {totalRecords}'">
+</p-paginator>
 </p-panel>
 
 <p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" [style]="{width: '50vw'}">

diff --git a/...src/app/features/components/listings-table/listing-details/listing-details.component.html b/...src/app/features/components/listings-table/listing-details/listing-details.component.html
@@ -100,7 +100,7 @@ <h2>Detailed Listing Information for</h2>
                         *ngIf="listing.matchScoreAmt<=addressWarningScoreLimit && (!listing.isMatchVerified && !listing.isMatchCorrected)"></i>
                 </span>
                 <span *ngIf="canUserEditAddress" class="change-address-button-container">
-                    <button pButton class="p-button-transparent" pTooltip="Edit Address"
+                    <button pButton class="p-button-transparent" pTooltip="Edit Address" aria-label="Edit Address"
                         (click)="onAddressChangeClicked()">
                         <span class="edit-address-icon"></span>
                     </button>

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
@@ -233,7 +233,8 @@ <h2 class="title">Listings</h2>
             [currentPageReportTemplate]="'Rows per page: {rows} &nbsp; {first}-{last} of {totalRecords}'"></p-paginator>
     </p-panel>
 
-    <p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" [style]="{width: '50vw'}">
+    <p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" ess [style]="{width: '50vw'}"
+        [closeOnEscape]="true">
         <span>
             <strong>Status:</strong> Status of the listing using the following categories:
             <ul class="statuses">