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 8333d4e..7dea673 100644 (file)
--- 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 4080ab6..4ee87b4 100644 (file)
--- 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 5969fc1..aa80caf 100644 (file)
--- 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 397753a..fc7396f 100644 (file)
--- 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 99aebdb..98c7cbd 100644 (file)
--- 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 7865747..62390c0 100644 (file)
--- 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>