lp1795720 add aria-hidden to Angular/AngularJS navbar icons
authorMike Risher <mrisher@catalyte.io>
Tue, 23 Jun 2020 21:33:20 +0000 (21:33 +0000)
committerGalen Charlton <gmc@equinoxinitiative.org>
Mon, 24 Aug 2020 15:24:57 +0000 (11:24 -0400)
Modify the navbar so that aria-hidden is applied to icons, so that they
are hidden from screen readers.

Signed-off-by: Mike Risher <mrisher@catalyte.io>
Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

Open-ILS/src/eg2/src/app/staff/nav.component.html
Open-ILS/src/templates/staff/navbar.tt2

index 735c77a..7e78ea4 100644 (file)
           <a class="dropdown-item" href="/eg/staff/circ/patron/search"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="alt+s f4" keyDesc="Patron Search">
-            <span class="material-icons">person</span>
+            <span class="material-icons" aria-hidden="true">person</span>
             <span i18n>Search for Patrons</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/cat/item/search">
-            <span class="material-icons">assignment</span>
+            <span class="material-icons" aria-hidden="true">assignment</span>
             <span i18n>Search for Items by Barcode</span>
           </a>
           <a class="dropdown-item" routerLink="/staff/catalog"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="f3" keyDesc="Catalog">
-            <span class="material-icons">search</span>
+            <span class="material-icons" aria-hidden="true">search</span>
             <span i18n>Search the Catalog</span>
           </a>
         </div>
           <a class="dropdown-item" href="/eg/staff/circ/patron/bcsearch"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="f1" keyDesc="Checkout">
-            <span class="material-icons">trending_up</span>
+            <span class="material-icons" aria-hidden="true">trending_up</span>
             <span i18n>Check Out</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/checkin/checkin"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="f2" keyDesc="Checkin">
-            <span class="material-icons">trending_down</span>
+            <span class="material-icons" aria-hidden="true">trending_down</span>
             <span i18n>Check In</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/checkin/capture"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="shift+f2" keyDesc="Capture Holds">
-            <span class="material-icons">pin_drop</span>
+            <span class="material-icons" aria-hidden="true">pin_drop</span>
             <span i18n>Capture Holds</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/holds/pull">
-            <span class="material-icons">view_list</span>
+            <span class="material-icons" aria-hidden="true">view_list</span>
             <span i18n>Pull List for Hold Requests</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/renew/renew"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="ctrl+f2" keyDesc="Renew Items">
-            <span class="material-icons">autorenew</span>
+            <span class="material-icons" aria-hidden="true">autorenew</span>
             <span i18n>Renew Items</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/patron/register"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="shift+f1" keyDesc="Register Patron">
-            <span class="material-icons">person_add</span>
+            <span class="material-icons" aria-hidden="true">person_add</span>
             <span i18n>Register Patron</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/patron/last"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="f8" keyDesc="Retrieve Last Patron">
-            <span class="material-icons">redo</span>
+            <span class="material-icons" aria-hidden="true">redo</span>
             <span i18n>Retrieve Last Patron</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/patron/search?show_recent=1">
-            <span class="material-icons">redo</span>
+            <span class="material-icons" aria-hidden="true">redo</span>
             <span i18n>Retrieve Recent Patrons</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/patron/pending/list">
-            <span class="material-icons">thumb_up</span>
+            <span class="material-icons" aria-hidden="true">thumb_up</span>
             <span i18n>Pending Patrons</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/patron/bucket/view">
-            <span class="material-icons">list</span>
+            <span class="material-icons" aria-hidden="true">list</span>
             <span i18n>User Buckets</span>
           </a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="/eg/staff/circ/patron/credentials">
-            <span class="material-icons">check_circle</span>
+            <span class="material-icons" aria-hidden="true">check_circle</span>
             <span i18n>Verify Credentials</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/in_house_use/index"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="f6" keyDesc="Record In-House Use">
-            <span class="material-icons">playlist_add</span>
+            <span class="material-icons" aria-hidden="true">playlist_add</span>
             <span i18n>Record In-House Use</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/circ/holds/shelf">
-            <span class="material-icons">format_list_bulleted</span>
+            <span class="material-icons" aria-hidden="true">format_list_bulleted</span>
             <span i18n>Holds Shelf</span>
           </a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="/eg/staff/cat/item/replace_barcode/index">
-            <span class="material-icons">library_books</span>
+            <span class="material-icons" aria-hidden="true">library_books</span>
             <span i18n>Replace Barcode</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/cat/item/search"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="f5" keyDesc="Navigate To Item Status">
-            <span class="material-icons">question_answer</span>
+            <span class="material-icons" aria-hidden="true">question_answer</span>
             <span i18n>Item Status</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/cat/item/missing_pieces">
-            <span class="material-icons">grid_on</span>
+            <span class="material-icons" aria-hidden="true">grid_on</span>
             <span i18n>Scan Item as Missing Pieces</span>
           </a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" (click)="reprintLast()"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="f9" keyDesc="Reprint Last Receipt">
-            <span class="material-icons">redo</span>
+            <span class="material-icons" aria-hidden="true">redo</span>
             <span i18n>Reprint Last Receipt</span>
           </a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="/eg/staff/offline-interface">
-            <span class="material-icons">signal_wifi_off</span>
+            <span class="material-icons" aria-hidden="true">signal_wifi_off</span>
             <span i18n>Offline Circulation</span>
           </a>
         </div>
           <a class="dropdown-item" routerLink="/staff/catalog/search"
             egAccessKey keyCtx="navbar"i18n-keySpec i18n-keyDesc
             keySpec="f3" keyDesc="Catalog">
-            <span class="material-icons">search</span>
+            <span class="material-icons" aria-hidden="true">search</span>
             <span i18n>Search the Catalog</span>
           </a>
           <a href="/eg/staff/cat/catalog/index" class="dropdown-item">
-            <span class="material-icons">search</span>
+            <span class="material-icons" aria-hidden="true">search</span>
             <span i18n>Search the Catalog (Traditional)</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/cat/item/search"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="f5" keyDesc="Navigate To Item Status">
-            <span class="material-icons">question_answer</span>
+            <span class="material-icons" aria-hidden="true">question_answer</span>
             <span i18n>Item Status</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="/eg/staff/cat/bucket/record/view" class="dropdown-item">
-            <span class="material-icons">list</span>
+            <span class="material-icons" aria-hidden="true">list</span>
             <span i18n>Record Buckets</span>
           </a>
           <a href="/eg/staff/cat/bucket/copy/view" class="dropdown-item">
-            <span class="material-icons">list</span>
+            <span class="material-icons" aria-hidden="true">list</span>
             <span i18n>Item Buckets</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="/eg/staff/cat/catalog/retrieve_by_id" class="dropdown-item">
-            <span class="material-icons">collections</span>
+            <span class="material-icons" aria-hidden="true">collections</span>
             <span i18n>Retrieve Bib Record by ID</span>
           </a>
           <a href="/eg/staff/cat/catalog/retrieve_by_tcn"
             class="dropdown-item"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="shift+f3" keyDesc="Retrieve Bib Record by TCN">
-            <span class="material-icons">collections_bookmark</span>
+            <span class="material-icons" aria-hidden="true">collections_bookmark</span>
             <span i18n>Retrieve Bib Record by TCN</span>
           </a>
           <a (click)="retrieveLastRecord()"
             egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
             keySpec="shift+f8" keyDesc="Retrieve Last Bib Record">
-            <span class="material-icons">redo</span>
+            <span class="material-icons" aria-hidden="true">redo</span>
             <span i18n>Retrieve Last Bib Record</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="/eg/staff/cat/catalog/new_bib" class="dropdown-item">
-            <span class="material-icons">add</span>
+            <span class="material-icons" aria-hidden="true">add</span>
             <span i18n>Create New MARC Record</span>
           </a>
           <a href="/eg/staff/cat/z3950/index" class="dropdown-item">
-            <span class="material-icons">cloud_download</span>
+            <span class="material-icons" aria-hidden="true">cloud_download</span>
             <span i18n>Import Record from Z39.50</span>
           </a>
           <a routerLink="/staff/cat/vandelay/import" class="dropdown-item">
-            <span class="material-icons">import_export</span>
+            <span class="material-icons" aria-hidden="true">import_export</span>
             <span i18n>MARC Batch Import/Export</span>
           </a>
           <a href="/eg/staff/cat/catalog/batchEdit" class="dropdown-item">
-            <span class="material-icons">format_paint</span>
+            <span class="material-icons" aria-hidden="true">format_paint</span>
             <span i18n>MARC Batch Edit</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="/eg/staff/cat/catalog/verifyURLs" class="dropdown-item">
-            <span class="material-icons">link</span>
+            <span class="material-icons" aria-hidden="true">link</span>
             <span i18n>Link Checker</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="/eg/staff/cat/catalog/manageAuthorities" class="dropdown-item">
-            <span class="material-icons">lock</span>
+            <span class="material-icons" aria-hidden="true">lock</span>
             <span i18n>Manage Authorities</span>
           </a>
           <a routerLink="/staff/cat/authority/edit" class="dropdown-item">
-            <span class="material-icons">collections</span>
+            <span class="material-icons" aria-hidden="true">collections</span>
             <span i18n>Retrieve Authority Record by ID</span>
           </a>
         </div>
         <div class="dropdown-menu" ngbDropdownMenu>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/search/unified">
-            <span class="material-icons">search</span>
+            <span class="material-icons" aria-hidden="true">search</span>
             <span i18n>General Search</span>
           </a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/search/unified?ca=pl">
-            <span class="material-icons">view_list</span>
+            <span class="material-icons" aria-hidden="true">view_list</span>
             <span i18n>My Selection Lists</span>
           </a>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/picklist/brief_record">
-            <span class="material-icons">edit</span>
+            <span class="material-icons" aria-hidden="true">edit</span>
             <span i18n>New Brief Record</span>
           </a>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/picklist/user_request">
-            <span class="material-icons">thumb_up</span>
+            <span class="material-icons" aria-hidden="true">thumb_up</span>
             <span i18n>Patron Requests</span>
           </a>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/picklist/bib_search">
-            <span class="material-icons">cloud_download</span>
+            <span class="material-icons" aria-hidden="true">cloud_download</span>
             <span i18n>MARC Federated Search</span>
           </a>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/picklist/from_bib">
-            <span class="material-icons">trending_down</span>
+            <span class="material-icons" aria-hidden="true">trending_down</span>
             <span i18n>Load Catalog Record IDs</span>
           </a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/picklist/upload">
-            <span class="material-icons">cloud_upload</span>
+            <span class="material-icons" aria-hidden="true">cloud_upload</span>
             <span i18n>Load MARC Order Records</span>
           </a>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/search/unified?ca=po">
-            <span class="material-icons">shopping_cart</span>
+            <span class="material-icons" aria-hidden="true">shopping_cart</span>
             <span i18n>Purchase Orders</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/acq/legacy/po/create">
-            <span class="material-icons">add_shopping_cart</span>
+            <span class="material-icons" aria-hidden="true">add_shopping_cart</span>
             <span i18n>Create Purchase Order</span>
           </a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/financial/claim_eligible">
-            <span class="material-icons">contact_phone</span>
+            <span class="material-icons" aria-hidden="true">contact_phone</span>
             <span i18n>Claim-Ready Items</span>
           </a>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/search/unified?ca=inv">
-            <span class="material-icons">attach_money</span>
+            <span class="material-icons" aria-hidden="true">attach_money</span>
             <span i18n>Open Invoices</span>
           </a>
           <a class="dropdown-item" 
             href="/eg/staff/acq/legacy/invoice/view?create=1">
-            <span class="material-icons">monetization_on</span>
+            <span class="material-icons" aria-hidden="true">monetization_on</span>
             <span i18n>Create Invoice</span>
           </a>
         </div>
         </a>
         <div class="dropdown-menu" ngbDropdownMenu>
           <a class="dropdown-item" routerLink="/staff/booking/create_reservation">
-            <span class="material-icons">add</span>
+            <span class="material-icons" aria-hidden="true">add</span>
             <span i18n>Create Reservations</span>
           </a>
           <a class="dropdown-item" routerLink="/staff/booking/pull_list">
-            <span class="material-icons">list</span>
+            <span class="material-icons" aria-hidden="true">list</span>
             <span i18n>Pull List</span>
           </a>
           <a class="dropdown-item" routerLink="/staff/booking/capture">
-            <span class="material-icons">pin_drop</span>
+            <span class="material-icons" aria-hidden="true">pin_drop</span>
             <span i18n>Capture Resources</span>
           </a>
           <a class="dropdown-item" routerLink="/staff/booking/pickup">
-            <span class="material-icons">trending_up</span>
+            <span class="material-icons" aria-hidden="true">trending_up</span>
             <span i18n>Pick Up Reservations</span>
           </a>
           <a class="dropdown-item" routerLink="/staff/booking/return">
-            <span class="material-icons">trending_down</span>
+            <span class="material-icons" aria-hidden="true">trending_down</span>
             <span i18n>Return Reservations</span>
           </a>
           <a class="dropdown-item" routerLink="/staff/booking/manage_reservations">
-            <span class="material-icons">layers</span>
+            <span class="material-icons" aria-hidden="true">layers</span>
             <span i18n>Manage Reservations</span>
           </a>
         </div>
         </a>
         <div class="dropdown-menu" ngbDropdownMenu>
           <a class="dropdown-item" href="/eg/staff/admin/workstation/index">
-            <span class="material-icons">computer</span>
+            <span class="material-icons" aria-hidden="true">computer</span>
             <span i18n>Workstation</span>
           </a>
           <!--
           Leaving here as a reminder this UI exists.
           <a class="dropdown-item"
               routerLink="/staff/admin/workstation/workstations/manage">
-            <span class="material-icons">computer</span>
+            <span class="material-icons" aria-hidden="true">computer</span>
             <span i18n>Registered Workstations</span>
           </a>
           -->
           <a class="dropdown-item" href="/eg/staff/admin/user_perms">
-            <span class="material-icons">person</span>
+            <span class="material-icons" aria-hidden="true">person</span>
             <span i18n>User Permission Editor</span>
           </a>
           <a class="dropdown-item"
               routerLink="/staff/admin/server/splash">
-            <span class="material-icons">account_balance</span>
+            <span class="material-icons" aria-hidden="true">account_balance</span>
             <span i18n>Server Administration</span>
           </a>
           <a class="dropdown-item" routerLink="/staff/admin/local/splash">
-            <span class="material-icons">landscape</span>
+            <span class="material-icons" aria-hidden="true">landscape</span>
             <span i18n>Local Administration</span>
           </a>
           <a class="dropdown-item"
               routerLink="/staff/admin/acq/splash">
-            <span class="material-icons">attach_money</span>
+            <span class="material-icons" aria-hidden="true">attach_money</span>
             <span i18n>Acquisitions Administration</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/admin/serials/index">
-            <span class="material-icons">layers</span>
+            <span class="material-icons" aria-hidden="true">layers</span>
             <span i18n>Serials Administration</span>
           </a>
           <a class="dropdown-item"
               routerLink="/staff/admin/booking/splash">
-            <span class="material-icons">business_center</span>
+            <span class="material-icons" aria-hidden="true">business_center</span>
             <span i18n>Booking Administration</span>
           </a>
           <a class="dropdown-item" href="/eg/staff/reporter/legacy/main">
-            <span class="material-icons">insert_chart</span>
+            <span class="material-icons" aria-hidden="true">insert_chart</span>
             <span i18n>Reports</span>
           </a>
         </div>
         <a ngbDropdownToggle i18n i18n-title
           title="Select Locale"
           class="nav-link dropdown-toggle no-caret with-material-icon">
-          <i class="material-icons">flag</i>
+          <i class="material-icons" aria-hidden="true">flag</i>
           <span>{{currentLocale.name()}}</span>
         </a>
         <div class="dropdown-menu" ngbDropdownMenu>
           <a class="dropdown-item" (click)="setLocale(locale)" 
             [ngClass]="{disabled: currentLocale.code() == locale.code()}"
             *ngFor="let locale of locales">
-            <span class="material-icons">add_location</span>
+            <span class="material-icons" aria-hidden="true">add_location</span>
             <span i18n>{{locale.name()}}</span>
           </a>
         </div>
           </eg-op-change>
           <a class="dropdown-item" *ngIf="!opChangeActive()" 
             (click)="navOpChange.open()">
-            <span class="material-icons">transform</span>
+            <span class="material-icons" aria-hidden="true">transform</span>
             <span i18n>Change Operator</span>
           </a>
           <a *ngIf="opChangeActive()" class="dropdown-item" 
             (click)="navOpChange.restore()">
-            <span class="material-icons">transform</span>
+            <span class="material-icons" aria-hidden="true">transform</span>
             <span i18n>Restore Operator</span>
           </a>
           <a class="dropdown-item" (click)="logout()">
-            <span class="material-icons">lock_outline</span>
+            <span class="material-icons" aria-hidden="true">lock_outline</span>
             <span i18n>Logout</span>
           </a>
           <a class="dropdown-item" routerLink="/staff/about">
-            <span class="material-icons">info_outline</span>
+            <span class="material-icons" aria-hidden="true">info_outline</span>
             <span i18n>About</span>
           </a>
         </div>
index 73053dd..b0efc91 100644 (file)
@@ -17,9 +17,9 @@
     <button type="button" class="navbar-toggle" 
         ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
       <span class="sr-only">[% l('Toggle navigation') %]</span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
+      <span class="icon-bar" aria-hidden="true"></span>
+      <span class="icon-bar" aria-hidden="true"></span>
+      <span class="icon-bar" aria-hidden="true"></span>
     </button>
   </div>
 
       <!-- search -->
       <li class="dropdown" uib-dropdown>
         <a href uib-dropdown-toggle>[% l('Search') %]
-          <b class="caret"></b>
+          <b class="caret" aria-hidden="true"></b>
         </a>
         <ul uib-dropdown-menu>
           <li>
             <a href="./circ/patron/search" target="_self"
               eg-accesskey="[% l('alt+s') %] [% l('f4') %]" 
               eg-accesskey-desc="[% l('Patron search by name, address, etc.') %]">
-              <span class="glyphicon glyphicon-user"></span>
+              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
               <span eg-accesskey-label>[% l('Search for Patrons') %]</span>
             </a>
           </li>
@@ -46,7 +46,7 @@
             <a href="./cat/item/search" target="_self"
               eg-accesskey="[% l('f5') %]" 
               eg-accesskey-desc="[% l('Item Status') %]">
-              <span class="glyphicon glyphicon-barcode"></span>
+              <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
               <span>[% l('Search for Items by Barcode') %]</span>
             </a>
           </li>
@@ -54,7 +54,7 @@
             <a href="/eg2/staff/catalog/search"
               eg-accesskey="[% l('f3') %]" 
               eg-accesskey-desc="[% l('Catalog') %]">
-              <span class="glyphicon glyphicon-search"></span>
+              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
               <span>[% l('Search the Catalog') %]</span>
             </a>
           </li>
@@ -64,7 +64,8 @@
 
       <!-- circulation -->
       <li class="dropdown" uib-dropdown>
-        <a href uib-dropdown-toggle>[% l('Circulation') %]<b class="caret"></b>
+        <a href uib-dropdown-toggle>[% l('Circulation') %]<b class="caret" 
+          aria-hidden="true"></b>
         </a>
 
         <ul uib-dropdown-menu>
@@ -72,7 +73,7 @@
             <a href="./circ/patron/bcsearch" target="_self"
               eg-accesskey="[% l('f1') %]" 
               eg-accesskey-desc="[% l('Check Out') %]">
-              <span class="glyphicon glyphicon-export"></span>
+              <span class="glyphicon glyphicon-export" aria-hidden="true"></span>
               [% l('Check Out') %]
             </a>
           </li>
@@ -80,7 +81,7 @@
             <a href="" ng-click="rs.active_tab('checkout')" target="_self"
               eg-accesskey="[% l('f1') %]" 
               eg-accesskey-desc="[% l('Check Out') %]">
-              <span class="glyphicon glyphicon-export"></span>
+              <span class="glyphicon glyphicon-export" aria-hidden="true"></span>
               [% l('Check Out') %]
             </a>
           </li>
@@ -88,7 +89,7 @@
             <a href="./circ/checkin/checkin" target="_self"
               eg-accesskey="[% l('f2') %]" 
               eg-accesskey-desc="[% l('Check In') %]">
-              <span class="glyphicon glyphicon-import"></span>
+              <span class="glyphicon glyphicon-import" aria-hidden="true"></span>
               [% l('Check In') %]
             </a>
           </li>
@@ -96,7 +97,7 @@
             <a href="" ng-click="rs.active_tab('checkin')" target="_self"
               eg-accesskey="[% l('f2') %]" 
               eg-accesskey-desc="[% l('Check In') %]">
-              <span class="glyphicon glyphicon-import"></span>
+              <span class="glyphicon glyphicon-import" aria-hidden="true"></span>
               [% l('Check In') %]
             </a>
           </li>
             <a href="./circ/checkin/capture" target="_self"
               eg-accesskey="[% l('shift+f2') %]" 
               eg-accesskey-desc="[% l('Capture Holds') %]">
-              <span class="glyphicon glyphicon-pushpin"></span>
+              <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
               [% l('Capture Holds') %]
             </a>
           </li>
           <li>
             <a href="./circ/holds/pull" target="_self">
-              <span class="glyphicon glyphicon-th-list"></span>
+              <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
               [% l('Pull List for Hold Requests') %]
             </a>
           </li>
             <a href="./circ/renew/renew" target="_self"
               eg-accesskey="[% l('ctrl+f2') %]" 
               eg-accesskey-desc="[% l('Renew items') %]">
-              <span class="glyphicon glyphicon-refresh"></span>
+              <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
               [% l('Renew Items') %]
             </a>
           </li>
             <a href="" ng-click="rs.active_tab('renew')" target="_self"
               eg-accesskey="[% l('ctrl+f2') %]" 
               eg-accesskey-desc="[% l('Renew items') %]">
-              <span class="glyphicon glyphicon-refresh"></span>
+              <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
               [% l('Renew Items') %]
             </a>
           </li>
             <a href="./circ/patron/register" target="_self"
               eg-accesskey="[% l('shift+f1') %]" 
               eg-accesskey-desc="[% l('Register Patron') %]">
-              <span class="glyphicon glyphicon-user"></span>
+              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
               [% l('Register Patron') %]
             </a>
           </li>
             <a href="" ng-click="rs.active_tab('register')" target="_self"
               eg-accesskey="[% l('shift+f1') %]" 
               eg-accesskey-desc="[% l('Register Patron') %]">
-              <span class="glyphicon glyphicon-user"></span>
+              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
               [% l('Register Patron') %]
             </a>
           </li>
             <a href="./circ/patron/last" target="_self"
               eg-accesskey="[% l('f8') %]" 
               eg-accesskey-desc="[% l('Retrieve Last Patron') %]">
-              <span class="glyphicon glyphicon-share-alt"></span>
+              <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
               [% l('Retrieve Last Patron') %]
             </a>
           </li>
           <li ng-if="showRecentPatrons">
             <a href="./circ/patron/search?show_recent=1" target="_self"
               eg-accesskey-desc="[% l('Retrieve Recent Patrons') %]">
-              <span class="glyphicon glyphicon-share-alt"></span>
+              <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
               [% l('Retrieve Recent Patrons') %]
             </a>
           </li>
           <li>
             <a href="./circ/patron/pending/list" target="_self">
-              <span class="glyphicon glyphicon-thumbs-up"></span>
+              <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
               [% l('Pending Patrons') %]
             </a>
           </li>
           <li>
             <a href="./circ/patron/bucket/view" target="_self">
-              <span class="glyphicon glyphicon-list-alt"></span>
+              <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
               [% l('User Buckets') %]
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./circ/patron/credentials" target="_self">
-              <span class="glyphicon glyphicon-ok"></span>
+              <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
               <span>[% l('Verify Credentials') %]</span>
             </a>
           </li>
             <a href="./circ/in_house_use/index" target="_self"
               eg-accesskey="[% l('f6') %]" 
               eg-accesskey-desc="[% l('Record In-House Use') %]">
-              <span class="glyphicon glyphicon-pencil"></span>
+              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
               <span>[% l('Record In-House Use') %]</span>
             </a>
           </li>
             <a href="" ng-click="rs.active_tab('in_house_use')" target="_self"
               eg-accesskey="[% l('f6') %]" 
               eg-accesskey-desc="[% l('Record In-House Use') %]">
-              <span class="glyphicon glyphicon-pencil"></span>
+              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
               <span>[% l('Record In-House Use') %]</span>
             </a>
           </li>
           <li>
             <a href="./circ/holds/shelf" target="_self">
-              <span class="glyphicon glyphicon-tasks"></span>
+              <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
               <span>[% l('Holds Shelf') %]</span>
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./cat/item/replace_barcode/index" target="_self">
-              <span class="glyphicon glyphicon-barcode"></span>
+              <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
               <span>[% l('Replace Barcode') %]</span>
             </a>
           </li>
           <li>
             <a href="./cat/item/search" target="_self">
-              <span class="glyphicon glyphicon-saved"></span>
+              <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
               <span>[% l('Item Status') %]</span>
             </a>
           </li>
           <li>
             <a href="./cat/item/missing_pieces" target="_self">
-              <span class="glyphicon glyphicon-th"></span>
+              <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
               <span>[% l('Scan Item as Missing Pieces') %]</span>
             </a>
           </li>
             <a href="" ng-click="reprintLast($event)"
               eg-accesskey="[% l('f9') %]" 
               eg-accesskey-desc="[% l('Reprint Last Receipt') %]">
-              <span class="glyphicon glyphicon-print"></span>
+              <span class="glyphicon glyphicon-print" aria-hidden="true"></span>
               <span>[% l('Reprint Last Receipt') %]</span>
             </a>
           </li>
           <li class="divider"></li>
           <li ng-class="{disabled : offlineDisabled()}">
             <a href="./offline-interface" target="_self" ng-class="{disabled : offlineDisabled()}">
-              <span class="glyphicon glyphicon-alert"></span>
+              <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
               <span>[% l('Offline Circulation') %]</span>
             </a>
           </li>
 
       <!-- cataloging -->
       <li class="dropdown" uib-dropdown>
-        <a href uib-dropdown-toggle>[% l('Cataloging') %]<b class="caret"></b>
+        <a href uib-dropdown-toggle>[% l('Cataloging') %]<b class="caret" 
+          aria-hidden="true"></b>
         </a>
         <ul uib-dropdown-menu>
           <li> 
             <a href="/eg2/staff/catalog/search">
-              <span class="glyphicon glyphicon-search"></span>
+              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
               <span>[% l('Search the Catalog') %]</span>
             </a>
           </li>
           <li>
             <a href="./cat/catalog/index" target="_self">
-              <span class="glyphicon glyphicon-search"></span>
+              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
               [% l('Search the Catalog (Traditional)') %]
             </a>
           </li>
           <li>
             <a href="./cat/item/search" target="_self">
-              <span class="glyphicon glyphicon-saved"></span>
+              <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
               <span>[% l('Item Status') %]</span>
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./cat/bucket/record/view" target="_self">
-              <span class="glyphicon glyphicon-list-alt"></span>
+              <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
               [% l('Record Buckets') %]
             </a>
           </li>
           <li>
             <a href="./cat/bucket/copy/view" target="_self">
-              <span class="glyphicon glyphicon-list-alt"></span>
+              <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
               [% l('Item Buckets') %]
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./cat/catalog/retrieve_by_id" target="_self">
-              <span class="glyphicon glyphicon-file"></span>
+              <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
               [% l('Retrieve Bib Record by ID') %]
             </a>
           </li>
             <a href="./cat/catalog/retrieve_by_tcn" target="_self"
               eg-accesskey="[% l('shift+f3') %]" 
               eg-accesskey-desc="[% l('Retrieve Last Bib Record') %]">
-              <span class="glyphicon glyphicon-tag"></span>
+              <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
               [% l('Retrieve Bib Record by TCN') %]
             </a>
           </li>
             <a href="" ng-click="retrieveLastRecord()" target="_self"
               eg-accesskey="[% l('shift+f8') %]" 
               eg-accesskey-desc="[% l('Retrieve Last Bib Record') %]">
-              <span class="glyphicon glyphicon-share-alt"></span>
+              <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
               [% l('Retrieve Last Bib Record') %]
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./cat/catalog/new_bib" target="_self">
-              <span class="glyphicon glyphicon-plus"></span>
+              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
               [% l('Create New MARC Record') %]
             </a>
           </li>
           <li>
             <a href="./cat/z3950/index" target="_self">
-              <span class="glyphicon glyphicon-cloud-download"></span>
+              <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
               [% l('Import Record from Z39.50') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/cat/vandelay/import">
-              <span class="glyphicon glyphicon-transfer"></span>
+              <span class="glyphicon glyphicon-transfer" aria-hidden="true"></span>
               [% l('MARC Batch Import/Export') %]
             </a>
           </li>
           <li>
             <a href="./cat/catalog/batchEdit" target="_self">
-              <span class="glyphicon glyphicon-edit"></span>
+              <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
               [% l('MARC Batch Edit') %]
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./cat/catalog/verifyURLs" target="_self">
-              <span class="glyphicon glyphicon-link"></span>
+              <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
               [% l('Link Checker') %]
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./cat/catalog/manageAuthorities" target="_self">
-              <span class="glyphicon glyphicon-lock"></span>
+              <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
               [% l('Manage Authorities') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/cat/authority/edit" target="_self">
-              <span class="glyphicon glyphicon-file"></span>
+              <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
               [% l('Retrieve Authority Record by ID') %]
             </a>
           </li>
 
       <!-- acquisitions -->
       <li class="dropdown" uib-dropdown>
-        <a href uib-dropdown-toggle>[% l('Acquisitions') %]<b class="caret"></b>
+        <a href uib-dropdown-toggle>[% l('Acquisitions') %]<b class="caret" 
+          aria-hidden="true"></b>
         </a>
         <ul uib-dropdown-menu>
           <li>
             <a href="./acq/legacy/search/unified" target="_self">
-              <span class="glyphicon glyphicon-search"></span>
+              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
               [% l('General Search') %]
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./acq/legacy/search/unified?ca=pl" target="_self">
-              <span class="glyphicon glyphicon-list"></span>
+              <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
               [% l('My Selection Lists') %]
             </a>
           </li>
           <li>
             <a href="./acq/legacy/picklist/brief_record" target="_self">
-              <span class="glyphicon glyphicon-pencil"></span>
+              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
               [% l('New Brief Record') %]
             </a>
           </li>
           <li>
             <a href="./acq/requests/list" target="_self">
-              <span class="glyphicon glyphicon-thumbs-up"></span>
+              <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
               [% l('Patron Requests') %]
             </a>
           </li>
           <li>
             <a href="./acq/legacy/picklist/bib_search" target="_self">
-              <span class="glyphicon glyphicon-cloud-download"></span>
+              <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
               [% l('MARC Federated Search') %]
             </a>
           </li>
           <li>
             <a href="./acq/legacy/picklist/from_bib" target="_self">
-              <span class="glyphicon glyphicon-import"></span>
+              <span class="glyphicon glyphicon-import" aria-hidden="true"></span>
               [% l('Load Catalog Record IDs') %]
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./acq/legacy/picklist/upload" target="_self">
-              <span class="glyphicon glyphicon-cloud-upload"></span>
+              <span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
               [% l('Load MARC Order Records') %]
             </a>
           </li>
           <li>
             <a href="./acq/legacy/search/unified?ca=po" target="_self">
-              <span class="glyphicon glyphicon-shopping-cart"></span>
+              <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
               [% l('Purchase Orders') %]
             </a>
           </li>
           <li>
             <a href="./acq/legacy/po/create" target="_self">
-              <span class="glyphicon glyphicon-plus"></span>
+              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
               [% l('Create Purchase Order') %]
             </a>
           </li>
           <li class="divider"></li>
           <li>
             <a href="./acq/legacy/financial/claim_eligible" target="_self">
-              <span class="glyphicon glyphicon-question-sign"></span>
+              <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
               [% l('Claim-Ready Items') %]
             </a>
           </li>
           <li>
             <a href="./acq/legacy/search/unified?ca=inv" target="_self">
-              <span class="glyphicon glyphicon-usd"></span>
+              <span class="glyphicon glyphicon-usd" aria-hidden="true"></span>
               [% l('Open Invoices') %]
             </a>
           </li>
           <li>
             <a href="./acq/legacy/invoice/view?create=1" target="_self">
-              <span class="glyphicon glyphicon-credit-card"></span>
+              <span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span>
               [% l('Create Invoice') %]
             </a>
           </li>
 
       <!-- booking -->
       <li class="dropdown" uib-dropdown>
-        <a href uib-dropdown-toggle>[% l('Booking') %]<b class="caret"></b>
+        <a href uib-dropdown-toggle>[% l('Booking') %]<b class="caret" 
+          aria-hidden="true"></b>
         </a>
         <ul uib-dropdown-menu>
           <li>
             <a href="/eg2/staff/booking/create_reservation" target="_self">
-              <span class="glyphicon glyphicon-plus"></span>
+              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
               [% l('Create Reservations') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/booking/pull_list" target="_self">
-              <span class="glyphicon glyphicon-th-list"></span>
+              <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
               [% l('Pull List') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/booking/capture" target="_self">
-              <span class="glyphicon glyphicon-pushpin"></span>
+              <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
               [% l('Capture Resources') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/booking/pickup" target="_self">
-              <span class="glyphicon glyphicon-export"></span>
+              <span class="glyphicon glyphicon-export" aria-hidden="true"></span>
               [% l('Pick Up Reservations') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/booking/return" target="_self">
-              <span class="glyphicon glyphicon-import"></span>
+              <span class="glyphicon glyphicon-import" aria-hidden="true"></span>
               [% l('Return Reservations') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/booking/manage_reservations" target="_self">
-              <span class="glyphicon glyphicon-wrench"></span>
+              <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
               [% l('Manage Reservations') %]
             </a>
           </li>
 
       <!-- admin -->
       <li class="dropdown" uib-dropdown>
-        <a href uib-dropdown-toggle>[% l('Administration') %]<b class="caret"></b></a>
+        <a href uib-dropdown-toggle>[% l('Administration') %]<b class="caret" 
+          aria-hidden="true"></b>
+        </a>
         <ul uib-dropdown-menu>
           <li>
             <a href="./admin/workstation/index" target="_self">
-              <span class="glyphicon glyphicon-hdd"></span>
+              <span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
               [% l('Workstation') %]
             </a>
           </li>
           <li>
             <a href="./admin/user_perms" target="_self">
-              <span class="glyphicon glyphicon-user"></span>
+              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
               [% l('User Permission Editor') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/admin/server/splash">
-              <span class="glyphicon glyphicon-briefcase"></span>
+              <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
               [% l('Server Administration') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/admin/local/splash">
-              <span class="glyphicon glyphicon-picture"></span>
+              <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
               [% l('Local Administration') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/admin/acq/splash">
-              <span class="glyphicon glyphicon-usd"></span>
+              <span class="glyphicon glyphicon-usd" aria-hidden="true"></span>
               [% l('Acquisitions Administration') %]
             </a>
           </li>
           <li>
             <a href="./admin/serials/index" target="_self">
-              <span class="glyphicon glyphicon-paperclip"></span>
+              <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
               [% l('Serials Administration') %]
             </a>
           </li>
           <li>
             <a href="/eg2/staff/admin/booking/splash" target="_self">
-              <span class="glyphicon glyphicon-calendar"></span>
+              <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
               [% l('Booking Administration') %]
             </a>
           </li>
           <li>
             <a href="./reporter/legacy/main" target="_self">
-              <span class="glyphicon glyphicon-object-align-bottom"></span>
+              <span class="glyphicon glyphicon-object-align-bottom" 
+                aria-hidden="true"></span>
               [% l('Reports') %]
             </a>
           </li>
       <li class="dropdown" uib-dropdown>
         <a href uib-dropdown-toggle>
           [% lcl = ctx.locale;  ctx.locales.$lcl %]
-          <span class="glyphicon glyphicon-flag"></span>
+          <span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
         </a>
         <ul uib-dropdown-menu>
         [% FOR locale IN ctx.locales.keys.sort %]
         <ul uib-dropdown-menu>
           <li ng-if="!op_changed">
             <a href="" ng-click="changeOperator()">
-              <span class="glyphicon glyphicon-random"></span>
+              <span class="glyphicon glyphicon-random" aria-hidden="true"></span>
               [% l('Change Operator') %]
             </a>
           </li>
           <li ng-if="op_changed">
             <a href="" ng-click="changeOperatorUndo()">
-              <span class="glyphicon glyphicon-random"></span>
+              <span class="glyphicon glyphicon-random" aria-hidden="true"></span>
               [% l('Restore Operator') %]
             </a>
           </li>
           <li>
             <a href="./login" ng-click="logout()" target="_self">
-              <span class="glyphicon glyphicon-log-out"></span>
+              <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
               [% l('Log Out') %]
             </a>
           </li>
           <li>
             <a href="./about" target="_self">
-              <span class="glyphicon glyphicon-question-sign"></span>
+              <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
               [% l('About') %]
             </a>
           </li>
               <span
                 title="[% l('Hatch Connection Status') %]"
                 class="glyphicon glyphicon-transfer"
-                ng-class="{'connect-status-ok' : hatchConnected()}">
+                ng-class="{'connect-status-ok' : hatchConnected()}"
+                aria-hidden="true">
               </span>
               [% l('Hatch') %]
             </a>