From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Mon, 12 Dec 2022 20:27:26 +0000 (-0600)
Subject: LP1615707 ARIA landmarks for staff interface
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=c4b1c55a9156fb9fe1eb6e0831de2f4b42ba8b24;p=Evergreen.git

LP1615707 ARIA landmarks for staff interface

Adds the following ARIA landmarks and roles to the Angular staff
interface:

* <main> and role="main" for the content container
* <nav> and role="navigation" for the navbar
* role="form" for the catalog search form (which lacks a <form> tag)
* role="search" for the search tab panel inside the form
* type="search" and role="searchbox" for the search term input field
* a custom region for the bib record summary box
* <aside> and role="complementary" for the facet sidebar

To construct the ARIA label for the bib record summary, I've added an ID
to the header row of the bib summary component so the screen reader can
use the localized text.

Since the staff interface doesn't really have a header section other
than the navigation, and there is no footer, I've left out these
landmarks.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Signed-off-by: Jane Sandberg <sandbergja@gmail.com>
---

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
index 785a397f82..c5f83511c7 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/record.component.html
@@ -9,7 +9,7 @@
   i18n-dialogBoby  dialogBody="Unsaved changes will be lost.  Continue navigation?">
 </eg-confirm-dialog>
 
-<div id="staff-catalog-record-container">
+<div id="staff-catalog-record-container" role="region" aria-labelledby="bib-record-summary">
   <div id='staff-catalog-bib-summary-container' class='mt-1'>
     <eg-bib-summary [bibSummary]="summaryForDisplay()">
     </eg-bib-summary>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
index 67feb9e0ba..54a50288a3 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
@@ -77,9 +77,9 @@
         </div>
       </div>
 
-      <div class="col-lg-2" id="eg-catalog-result-facets" *ngIf="!searchContext.basket">
+      <aside class="col-lg-2" id="eg-catalog-result-facets" *ngIf="!searchContext.basket">
         <eg-catalog-result-facets></eg-catalog-result-facets>
-      </div>
+      </aside>
     </div>
   </div>
 </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
index 252095e389..f2111dea7c 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
@@ -13,7 +13,7 @@
   </ng-container>
 </ng-template>
 
-<div id='staffcat-search-form'>
+<div id='staffcat-search-form' role="form">
 
   <div *ngIf="canBeHidden()" class="row pt-1 pe-2">
     <div class="col-lg-12 d-flex">
@@ -29,7 +29,7 @@
     </div>
   </div>
   
-  <div *ngIf="!hideForm()" class="row pt-3 pb-1 mb-1">
+  <div *ngIf="!hideForm()" class="row pt-3 pb-1 mb-1" role="search">
   <div class="col-lg-8">
     <ul ngbNav #searchTabs="ngbNav" [(activeId)]="searchTab" (navChange)="onNavChange($event)" [keyboard]="true" [roles]="false" role="tablist" class="nav-tabs">
       <li role="presentation" [ngbNavItem]="'term'">
@@ -88,7 +88,7 @@
               <div class="form-group">
                 <div *ngIf="idx === 0">
                   <label i18n class="form-label input-label" for='first-query-input'>Search Terms</label>
-                  <input type="text" class="form-control"
+                  <input type="search" class="form-control"
                     id='first-query-input'
                     [(ngModel)]="context.termSearch.query[idx]"
                     (keyup.enter)="searchByForm()"
@@ -96,7 +96,7 @@
                 </div>
                 <div *ngIf="idx > 0">
                   <label i18n class="form-label input-label" for='context-termSearch-query-{{idx}}'>Search Terms</label>
-                  <input type="text" class="form-control"
+                  <input type="search" class="form-control"
                     [(ngModel)]="context.termSearch.query[idx]"
                     (keyup.enter)="searchByForm()"
                     placeholder="Query..."/>
diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.html b/Open-ILS/src/eg2/src/app/staff/nav.component.html
index e44a16c147..facd33cd10 100644
--- a/Open-ILS/src/eg2/src/app/staff/nav.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/nav.component.html
@@ -1,4 +1,4 @@
-<div id="staff-navbar" class="navbar fixed-top navbar-expand navbar-default">
+<nav id="staff-navbar" class="navbar fixed-top navbar-expand navbar-default" aria-label="Main Navigation" i18n-aria-label>
   <div class="collapse navbar-collapse">
     <div class="navbar-nav">
       <div class="nav-item">
@@ -538,5 +538,5 @@
       </div>
     </div>
   </div>
-</div>
+</nav>
 
diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html
index 76b092a6de..51d8d84eeb 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.html
@@ -1,7 +1,7 @@
 
 <div class='eg-bib-summary card tight-card w-100' *ngIf="summary">
   <div class="card-header d-flex">
-    <div class="fw-bold">
+    <div id="bib-record-summary" class="fw-bold">
       <span i18n>Record Summary</span>
       <ng-container *ngIf="summary.record.deleted() === 't'">
         <span class="text-danger" i18n>(Deleted)</span>
diff --git a/Open-ILS/src/eg2/src/app/staff/staff.component.html b/Open-ILS/src/eg2/src/app/staff/staff.component.html
index 78657470cf..62390c0c2c 100644
--- a/Open-ILS/src/eg2/src/app/staff/staff.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/staff.component.html
@@ -1,10 +1,10 @@
 <!-- top navigation bar -->
 <eg-staff-nav-bar></eg-staff-nav-bar>
 
-<div id='staff-content-container'>
+<main id='staff-content-container'>
   <!-- page content -->
   <router-outlet></router-outlet>
-</div>
+</main>
 
 <!-- EgAccessKey Info Panel -->
 <eg-accesskey-info #egAccessKeyInfo></eg-accesskey-info>