From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Wed, 2 Nov 2022 20:27:40 +0000 (-0500)
Subject: LP1615707 Skip link for staff navigation
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=refs%2Fheads%2Fuser%2Fsleary%2Flp1615707-staff-skipnav;p=working%2FEvergreen.git

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 9385e996af..555e2c53a2 100644
--- 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 b60e78d611..834e7ccb6d 100644
--- 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 2df005a88a..3995e4c4e6 100644
--- 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 397753a46e..db0376ea29 100644
--- 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 f32afa2200..8874acb11d 100644
--- 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 d9e6b76025..3b7c592ee9 100644
--- 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>