From 4f6a123ea29281deab24d19d155820335419ae44 Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Mon, 12 Dec 2022 14:27:26 -0600
Subject: [PATCH] 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>
---
 .../src/eg2/src/app/staff/catalog/record/record.component.html    | 2 +-
 .../src/eg2/src/app/staff/catalog/result/results.component.html   | 4 ++--
 Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html | 8 ++++----
 Open-ILS/src/eg2/src/app/staff/nav.component.html                 | 4 ++--
 .../src/app/staff/share/bib-summary/bib-summary.component.html    | 2 +-
 Open-ILS/src/eg2/src/app/staff/staff.component.html               | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

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 8333d4eb95..7dea673c3a 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 4080ab62ec..4ee87b4488 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
@@ -78,9 +78,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 5969fc105f..aa80cafcf2 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 pr-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">
     <ngb-tabset #searchTabs [activeId]="searchTab" (tabChange)="onTabChange($event)">
       <ngb-tab title="Keyword Search" i18n-title id="term">
@@ -88,7 +88,7 @@
               <div class="form-group">
                 <div *ngIf="idx === 0">
                   <label i18n class="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="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 397753a46e..fc7396f664 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 99aebdb224..98c7cbd73f 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="font-weight-bold">
+    <div id="bib-record-summary" class="font-weight-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>
-- 
2.11.0