LP1615707 Skip link for staff navigation

A small patch to address one of the issues in bug 1615707. This adds a
skip link above the staff nav bar. When it has focus, it's visible and
sits on top of the regular navigation links. Otherwise, it's placed off
the canvas.

Updated to simplify the routing approach and add a missing page title
(used as the skip destination anchor).

It would be great to customize the text of the link to specify the
context. For example, the bookshare.org search results skip link reads
"Skip to 1 through 7 of 7 search results." That will be more complicated
to implement though, and this wording is a common and accepted pattern.

This patch covers only Angular screens. A separate patch will be needed
for AngularJS.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>

diff --git a/Open-ILS/src/eg2/src/app/routing.module.ts b/Open-ILS/src/eg2/src/app/routing.module.ts
index 9385e99..555e2c5 100644 (file)
--- a/Open-ILS/src/eg2/src/app/routing.module.ts
+++ b/Open-ILS/src/eg2/src/app/routing.module.ts
@@ -23,7 +23,8 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     onSameUrlNavigation: 'reload',
-    relativeLinkResolution: 'legacy'
+    relativeLinkResolution: 'legacy',
+    anchorScrolling: 'enabled'
 })],
   exports: [RouterModule],
   providers: [BaseResolver]

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/bib-by-ident.component.html b/Open-ILS/src/eg2/src/app/staff/cat/bib-by-ident.component.html
index b60e78d..834e7cc 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/bib-by-ident.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/bib-by-ident.component.html
@@ -1,3 +1,13 @@
+<ng-container *ngIf="identType === 'id'">
+  <eg-staff-banner bannerText="Search by Record ID" i18n-bannerText>
+  </eg-staff-banner>
+</ng-container>
+
+<ng-container *ngIf="identType === 'tcn'">
+  <eg-staff-banner bannerText="Search by Record TCN" i18n-bannerText>
+  </eg-staff-banner>
+</ng-container>
+
 
 <div class="row form-validated mt-5">
   <div class="col-lg-6 form-inline">

diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.css b/Open-ILS/src/eg2/src/app/staff/nav.component.css
index 2df005a..3995e4c 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/nav.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/nav.component.css
@@ -1,3 +1,22 @@
+a.skip-nav:not(:focus):not(:hover) {
+    transform: translateY(-4em);
+    opacity: 0;
+}
+
+a.skip-nav {
+    background-color: #fff;
+    border: 1px solid #0D7764;
+    color: #0D7764;
+    margin: 0;
+    padding: 1em;
+    position: absolute;
+    z-index: 2000;
+    left: 0;
+    top: 0;
+    width: auto;
+    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
+}
+
 /* remove dropdown carret for icon-based entries */
 #staff-navbar .no-caret::after {
     display:none;

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..db0376e 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,3 +1,5 @@
+<a i18n class="skip-nav" [routerLink]="" [fragment]="'staff-banner'">Skip to main content</a>
+
 <div id="staff-navbar" class="navbar fixed-top navbar-expand navbar-default">
   <div class="collapse navbar-collapse">
     <div class="navbar-nav">

diff --git a/Open-ILS/src/eg2/src/app/staff/share/staff-banner.component.ts b/Open-ILS/src/eg2/src/app/staff/share/staff-banner.component.ts
index f32afa2..8874acb 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/staff-banner.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/staff-banner.component.ts
@@ -7,7 +7,7 @@ import {Component, OnInit, Input} from '@angular/core';
 
     <div class="lead alert alert-primary text-center pt-1 pb-1"
       [ngClass]="bannerStyle ? bannerStyle : 'alert-primary'">
-      <h1>
+      <h1 id="staff-banner" tabindex="0">
         <i class="material-icons align-middle text-left" *ngIf="bannerIcon">{{bannerIcon}}</i>
         <span i18n>{{bannerText}}</span>
       </h1>

diff --git a/Open-ILS/src/eg2/src/app/staff/splash.component.html b/Open-ILS/src/eg2/src/app/staff/splash.component.html
index d9e6b76..3b7c592 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/splash.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/splash.component.html
@@ -16,7 +16,7 @@
     }
 </style>
 
-<h1 class="sr-only" i18n>Evergreen Staff Client Home Page</h1>
+<h1 class="sr-only" id="staff-banner" tabindex="0" i18n>Evergreen Staff Client Home Page</h1>
 
 <eg-title i18n-prefix prefix="Evergreen Staff Client"></eg-title>