From ffda9748ee7e38d5e049ade9a9d59f7cd49cb646 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berick@esilibrary.com>
Date: Wed, 15 Jan 2014 10:44:44 -0500
Subject: [PATCH] LP#1268636 TPAC initial navigation headers

Added a screen-reader only CSS class ("sr-only") for adding content
which should only be read by screen readers and is otherwise invisible.

Added hidden generic <h1> and page-specific <h2> entries to improve
web accessibility navigation.

Additional content-specific headers (h3 and down) are recommended for
content grouping, but not included in this commit.

Signed-off-by: Bill Erickson <berick@esilibrary.com>
Signed-off-by: Dan Scott <dscott@laurentian.ca>
---
 Open-ILS/src/templates/opac/advanced.tt2        |  1 +
 Open-ILS/src/templates/opac/browse.tt2          |  1 +
 Open-ILS/src/templates/opac/cnbrowse.tt2        |  1 +
 Open-ILS/src/templates/opac/css/style.css.tt2   | 16 ++++++++++++++++
 Open-ILS/src/templates/opac/home.tt2            |  1 +
 Open-ILS/src/templates/opac/login.tt2           |  2 ++
 Open-ILS/src/templates/opac/mylist.tt2          |  1 +
 Open-ILS/src/templates/opac/parts/base.tt2      |  3 +++
 Open-ILS/src/templates/opac/parts/searchbar.tt2 |  1 +
 Open-ILS/src/templates/opac/password_reset.tt2  |  1 +
 Open-ILS/src/templates/opac/place_hold.tt2      |  1 +
 Open-ILS/src/templates/opac/record.tt2          |  1 +
 Open-ILS/src/templates/opac/register.tt2        |  1 +
 Open-ILS/src/templates/opac/results.tt2         |  1 +
 Open-ILS/src/templates/opac/sms_cn.tt2          |  1 +
 Open-ILS/src/templates/opac/temp_warn.tt2       |  1 +
 16 files changed, 34 insertions(+)

diff --git a/Open-ILS/src/templates/opac/advanced.tt2 b/Open-ILS/src/templates/opac/advanced.tt2
index 2d04448ad2..904ee1a13b 100644
--- a/Open-ILS/src/templates/opac/advanced.tt2
+++ b/Open-ILS/src/templates/opac/advanced.tt2
@@ -5,6 +5,7 @@
     pane = CGI.param("pane") || "advanced";
     loc = ctx.search_ou;
 -%]
+    <h2 class="sr-only">[% l('Advanced Search') %]</h2>
     <div id="search-wrapper">
         <div id="search-box">
             <span class="search_catalog_lbl mobile_hide">[% l('Search the Catalog') %]</span>
diff --git a/Open-ILS/src/templates/opac/browse.tt2 b/Open-ILS/src/templates/opac/browse.tt2
index 9e7b91f708..962dbd0243 100644
--- a/Open-ILS/src/templates/opac/browse.tt2
+++ b/Open-ILS/src/templates/opac/browse.tt2
@@ -12,6 +12,7 @@
     depart_list = ['blimit', 'bterm', 'bpivot'];
 %]
 
+    <h2 class="sr-only">[% l('Catalog Browse') %]</h2>
     <div id="search-wrapper">
         [%# XXX TODO Give searchbar.tt2 more smarts so we can just do:
           # INCLUDE "opac/parts/searchbar.tt2" %]
diff --git a/Open-ILS/src/templates/opac/cnbrowse.tt2 b/Open-ILS/src/templates/opac/cnbrowse.tt2
index 958dfecfd2..87a303e45c 100644
--- a/Open-ILS/src/templates/opac/cnbrowse.tt2
+++ b/Open-ILS/src/templates/opac/cnbrowse.tt2
@@ -6,6 +6,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Call Number Browse"); %]
+    <h2 class="sr-only">[% l('Call Number Browse') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <div id="content-wrapper">
         <div id="main-content">
diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index a5220fbf57..fadfd5349c 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -2005,3 +2005,19 @@ a.preflib_change {
         table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; }
 }
 
+
+/* 
+For text which is visible only to screen readers.
+Borrowed from http://getbootstrap.com/css/#helper-classes-screen-readers 
+See also http://webaim.org/techniques/css/invisiblecontent/
+*/
+.sr-only {                                                                     
+    position: absolute;                                                          
+    width: 1px;                                                                  
+    height: 1px;                                                                 
+    padding: 0;                                                                  
+    margin: -1px;                                                                
+    overflow: hidden;                                                            
+    clip: rect(0, 0, 0, 0);                                                      
+    border: 0;                                                                   
+} 
diff --git a/Open-ILS/src/templates/opac/home.tt2 b/Open-ILS/src/templates/opac/home.tt2
index 123f47b3bb..3257ba46a9 100644
--- a/Open-ILS/src/templates/opac/home.tt2
+++ b/Open-ILS/src/templates/opac/home.tt2
@@ -2,6 +2,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Home") %]
+    <h2 class="sr-only">[% l('Catalog Home') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <div id="content-wrapper">
         <div id="main-content-home">
diff --git a/Open-ILS/src/templates/opac/login.tt2 b/Open-ILS/src/templates/opac/login.tt2
index 9b6513f72c..0e82edf974 100644
--- a/Open-ILS/src/templates/opac/login.tt2
+++ b/Open-ILS/src/templates/opac/login.tt2
@@ -3,11 +3,13 @@
     INCLUDE "opac/parts/topnav.tt2";
     basic_search = "f";
     ctx.page_title = l("Account Login") %]
+    <h2 class="sr-only">[% l('Account Login') %]</h2>
     <div class='mobile_hide'>
         [% INCLUDE "opac/parts/searchbar.tt2" %]
     </div>
     <div id="content-wrapper">
         <div id="main-content">
+            <h3 class="sr-only">[% l('Account Login Form') %]</h3>
             [% INCLUDE "opac/parts/login/form.tt2" %]
             <div class="clear-both very-big-height"></div>	
         </div>
diff --git a/Open-ILS/src/templates/opac/mylist.tt2 b/Open-ILS/src/templates/opac/mylist.tt2
index 2164e4147c..a710e97336 100644
--- a/Open-ILS/src/templates/opac/mylist.tt2
+++ b/Open-ILS/src/templates/opac/mylist.tt2
@@ -3,6 +3,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Record Detail") %]
+    <h2 class="sr-only">[% l('Temporary List') %]</h2>
     <div class="mobile_hide">
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     </div>
diff --git a/Open-ILS/src/templates/opac/parts/base.tt2 b/Open-ILS/src/templates/opac/parts/base.tt2
index eaed67e386..fc0c16ea31 100644
--- a/Open-ILS/src/templates/opac/parts/base.tt2
+++ b/Open-ILS/src/templates/opac/parts/base.tt2
@@ -22,7 +22,10 @@
         [% INCLUDE 'opac/parts/goog_analytics.tt2' %]
     </head>
     <body[% IF want_dojo; ' class="tundra"'; END %]>
+        <h1 class="sr-only">[% l('Catalog') %]</h1>
+        [%#Each content page needs (at minimum) an <h2> describing the content%]
         [% content %] 
+        <h2 class="sr-only">[% l('Additional Resources') %]</h2>
         [% INCLUDE 'opac/parts/footer.tt2' %]
         [% INCLUDE 'opac/parts/js.tt2' %]
         [%- IF ENV.OILS_CHILIFRESH_ACCOUNT %]
diff --git a/Open-ILS/src/templates/opac/parts/searchbar.tt2 b/Open-ILS/src/templates/opac/parts/searchbar.tt2
index c8ac6ecbe1..a7bdb90423 100644
--- a/Open-ILS/src/templates/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates/opac/parts/searchbar.tt2
@@ -1,3 +1,4 @@
+<h3 class="sr-only">[% l('Catalog Search') %]</h3>
 [% PROCESS "opac/parts/org_selector.tt2" %]
 <div id="search-wrapper">
     [% UNLESS took_care_of_form -%]
diff --git a/Open-ILS/src/templates/opac/password_reset.tt2 b/Open-ILS/src/templates/opac/password_reset.tt2
index 6bc6b24be8..2856e47024 100644
--- a/Open-ILS/src/templates/opac/password_reset.tt2
+++ b/Open-ILS/src/templates/opac/password_reset.tt2
@@ -3,6 +3,7 @@
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l('Library system password reset request form');
 -%]
+<h2 class="sr-only">[% l('Reset Password') %]</h2>
 <div class="mobile_hide">
 [% INCLUDE "opac/parts/searchbar.tt2" %]
 </div>
diff --git a/Open-ILS/src/templates/opac/place_hold.tt2 b/Open-ILS/src/templates/opac/place_hold.tt2
index 2c1da79ec0..1ca06cc554 100644
--- a/Open-ILS/src/templates/opac/place_hold.tt2
+++ b/Open-ILS/src/templates/opac/place_hold.tt2
@@ -5,6 +5,7 @@
         basic_search = "f";
     END;
     ctx.page_title = l("Place Hold") %]
+    <h2 class="sr-only">[% l('Hold Placement') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <div id="content-wrapper">
         <div id="main-content">
diff --git a/Open-ILS/src/templates/opac/record.tt2 b/Open-ILS/src/templates/opac/record.tt2
index 935ebdd5b2..0772c041cb 100644
--- a/Open-ILS/src/templates/opac/record.tt2
+++ b/Open-ILS/src/templates/opac/record.tt2
@@ -4,6 +4,7 @@
     ctx.page_title = l("Record Detail");
     IF CGI.param("expand"); basic_search = "f"; END;    
 -%]
+    <h2 class="sr-only">[% l('Record Details') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <br class="clear-both" />
     <div id="content-wrapper" class="content-wrapper-record-page">
diff --git a/Open-ILS/src/templates/opac/register.tt2 b/Open-ILS/src/templates/opac/register.tt2
index 1e80cf6e8a..cb04055550 100644
--- a/Open-ILS/src/templates/opac/register.tt2
+++ b/Open-ILS/src/templates/opac/register.tt2
@@ -47,6 +47,7 @@ END;
 
 %]
 
+<h2 class="sr-only">[% l('Account Registration') %]</h2>
 <div id="content-wrapper">
     <div id="main-content-register">
         <div class="common-full-pad"></div>
diff --git a/Open-ILS/src/templates/opac/results.tt2 b/Open-ILS/src/templates/opac/results.tt2
index bbe00ece45..eaea066392 100644
--- a/Open-ILS/src/templates/opac/results.tt2
+++ b/Open-ILS/src/templates/opac/results.tt2
@@ -16,6 +16,7 @@
     PROCESS "opac/parts/misc_util.tt2";
     PROCESS get_library;
 -%]
+    <h2 class="sr-only">[% l('Search Results') %]</h2>
     <form action="[% ctx.opac_root %]/results" method="get">
     [% INCLUDE "opac/parts/searchbar.tt2" took_care_of_form=1 %]
     <div class="almost-content-wrapper">
diff --git a/Open-ILS/src/templates/opac/sms_cn.tt2 b/Open-ILS/src/templates/opac/sms_cn.tt2
index 5353a700a6..f8db37c28d 100644
--- a/Open-ILS/src/templates/opac/sms_cn.tt2
+++ b/Open-ILS/src/templates/opac/sms_cn.tt2
@@ -2,6 +2,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Send Call Number via Text/SMS") %]
+    <h2 class="sr-only">[% l('Send Call Number via Text/SMS') %]</h2>
     <div class="mobile_hide">
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     </div>
diff --git a/Open-ILS/src/templates/opac/temp_warn.tt2 b/Open-ILS/src/templates/opac/temp_warn.tt2
index 9adbcb5f62..8aa978d3fd 100644
--- a/Open-ILS/src/templates/opac/temp_warn.tt2
+++ b/Open-ILS/src/templates/opac/temp_warn.tt2
@@ -3,6 +3,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Temporary List Warning") %]
+    <h2 class="sr-only">[% l('Temporary List Warning') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <div id="content-wrapper">
         <div id="main-content">
-- 
2.11.0