LP2017034 Skip nav for AngularJS staff interfaces

Adds a skip link to the older AngularJS interfaces.

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

diff --git a/Open-ILS/src/templates/opac/parts/base.tt2 b/Open-ILS/src/templates/opac/parts/base.tt2
index 314ed8a..3827ac9 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/base.tt2
+++ b/Open-ILS/src/templates/opac/parts/base.tt2
@@ -55,7 +55,11 @@
         [% PROCESS 'opac/parts/stripe.tt2' %]
     </head>
     <body[% IF want_dojo; ' class="tundra"'; END %]>
+        <a i18n class="skip-nav" href="#main-content-landing">[% l('Skip to main content') %]</a>
+
         <h1 class="sr-only">[% l('Catalog') %]</h1>
+        <div id="main-content-landing" tabindex="0"></div>
+        
         [%#Each content page needs (at minimum) an <h2> describing the content%]
         [% content %] 
         <h2 class="sr-only">[% l('Additional Resources') %]</h2>

diff --git a/Open-ILS/src/templates/staff/css/admin.css.tt2 b/Open-ILS/src/templates/staff/css/admin.css.tt2
index 80e9ccf..a0517a3 100644 (file)
--- a/Open-ILS/src/templates/staff/css/admin.css.tt2
+++ b/Open-ILS/src/templates/staff/css/admin.css.tt2
@@ -1,3 +1,21 @@
+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;
+}
 
 #age-to-lost-container {
   margin-top: 20px;

diff --git a/Open-ILS/src/templates/staff/navbar.tt2 b/Open-ILS/src/templates/staff/navbar.tt2
index 58ce766..ff0f28d 100644 (file)
--- a/Open-ILS/src/templates/staff/navbar.tt2
+++ b/Open-ILS/src/templates/staff/navbar.tt2
@@ -12,6 +12,8 @@
 <div id="top-navbar" role="navigation"
   class="navbar navbar-default navbar-fixed-top" role="navigation">
 
+  <a i18n class="skip-nav" href="#top-content-container">[% l('Skip to main content') %]</a>
+
   <!-- navbar-header here needed for supporting angular-ui-bootstrap -->
   <div class="navbar-header">
     <button type="button" class="navbar-toggle"