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 785a397..c5f8351 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 67feb9e..54a5028 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
@@ -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 252095e..f2111de 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 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 e44a16c..facd33c 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 76b092a..51d8d84 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="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 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>