From f3e37178858dffa26055efc14e79edba9b6e7c49 Mon Sep 17 00:00:00 2001
From: Mike Risher <mrisher@catalyte.io>
Date: Fri, 17 Jul 2020 23:41:02 +0000
Subject: [PATCH] lp1887869 Item Edits and Accessibility

Ensure that all the input fields are labelled so that this page can be
used with screen readers. There is a tab for edits and a tab for item
templates - both need to be addressed.

Signed-off-by: Mike Risher <mrisher@catalyte.io>

Changes to be committed:
	modified:   Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2
	modified:   Open-ILS/src/templates/staff/cat/volcopy/t_edit.tt2
	modified:   Open-ILS/src/templates/staff/cat/volcopy/t_view.tt2
	modified:   Open-ILS/web/js/ui/default/staff/cat/volcopy/app.js
---
 .../templates/staff/cat/volcopy/t_attr_edit.tt2    | 161 ++++++++++++---------
 .../src/templates/staff/cat/volcopy/t_edit.tt2     |  98 +++++++++----
 .../src/templates/staff/cat/volcopy/t_view.tt2     |  10 +-
 .../web/js/ui/default/staff/cat/volcopy/app.js     |  20 +--
 4 files changed, 182 insertions(+), 107 deletions(-)

diff --git a/Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2 b/Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2
index 5ee1c0bb4e..7d72027302 100644
--- a/Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2
+++ b/Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2
@@ -51,33 +51,39 @@
   <form novalidate class="css-form" name="forms.myForm">
   <div class="row bg-info">
     <div class="col-md-1">
-      <h5>[% l('Template') %]</h5>
+      <h5><label id="template">[% l('Template') %]</label></h5>
     </div>
     <div ng-class="template_controls ? 'col-md-2' : 'col-md-5'">
-      <eg-basic-combo-box list="template_name_list" selected="template_name"></eg-basic-combo-box>
+      <eg-basic-combo-box list="template_name_list"
+        combo-box-aria="template" selected="template_name"></eg-basic-combo-box>
     </div>
     <div class="col-md-1">
-      <button class="btn btn-default " ng-click="applyTemplate(template_name)" type="button">[% l('Apply') %]</button>
+      <button class="btn btn-default" ng-click="applyTemplate(template_name)" type="button">[% l('Apply') %]</button>
     </div>
     <div class="col-md-6" ng-show="template_controls">
       <div class="row">
         <div class="col-md-4">
           <div class="btn-group">
-            <label class="btn btn-default" ng-click="saveTemplate(template_name)">[% l('Save') %]</label>
-            <label class="btn btn-default" ng-click="deleteTemplate(template_name)">[% l('Delete') %]</label>
+            <button class="btn btn-default" ng-click="saveTemplate(template_name)" type="button">
+              [% l('Save') %]
+            </button>
+            <button class="btn btn-default" ng-click="deleteTemplate(template_name)" type="button">
+              [% l('Delete') %]
+            </button>
           </div>
         </div>
         <div class="col-md-8">
           <div class="btn-group pull-right">
-            <span class="btn btn-default btn-file">
+            <label class="btn btn-default btn-file" id="import">
               [% l('Import') %]
-              <input type="file" eg-file-reader container="imported_templates.data">
-            </span>
-            <label class="btn btn-default"
+              <input aria-labelledby="import" type="file" eg-file-reader
+                container="imported_templates.data">
+            </label>
+            <button class="btn btn-default"
               eg-json-exporter container="templates"
               default-file-name="'[% l('exported_copy_templates.json') %]'">
               [% l('Export') %]
-            </label>
+            </button>
           </div>
         </div>
       </div>
@@ -132,17 +138,19 @@
 
   <ul class="copy-attributes-grid">
     <li ng-if="defaults.attributes.circulate">
-      <div class="bg-info"><label>[% l('Circulate?') %]</label></div>
+      <div class="bg-info"><label id="circulate">[% l('Circulate?') %]</label></div>
       <div ng-class="{'bg-success': working.circulate !== undefined, 'field-changed': field_changed('circulate')}">
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.circulate" value="t"/>
+          <label id="yesCirc">
+            <input type="radio" ng-model="working.circulate" value="t"
+              aria-labelledby="circulate yesCirc" />
             [% l('Yes') %]
           </label>
         </div>
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.circulate" value="f"/>
+          <label id="noCirc">
+            <input type="radio" ng-model="working.circulate" value="f"
+              aria-labelledby="circulate noCirc"/>
             [% l('No') %]
           </label>
         </div>
@@ -152,9 +160,9 @@
       <div ng-if="hasMulti()"> </div>
     </li>
     <li ng-if="defaults.attributes.status">
-      <div class="bg-info"><label>[% l('Status') %]</label></div>
+      <div class="bg-info"><label id="status">[% l('Status') %]</label></div>
       <div ng-class="{'bg-success': working.status !== undefined, 'field-changed': field_changed('status')}">
-        <select class="form-control" ng-model="working.status"
+        <select class="form-control" ng-model="working.status" aria-labelledby="status"
           ng-options="s.id() as s.name() disable when magic_status_list.indexOf(s.id(),0) > -1 for s in status_list">
         </select>
       </div>
@@ -168,9 +176,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.circ_lib">
-      <div class="bg-info"><label>[% l('Circulating Library') %]</label></div>
+      <div class="bg-info"><label id="circLib">[% l('Circulating Library') %]</label></div>
       <div ng-class="{'bg-success': working.circ_lib !== undefined, 'field-changed': field_changed('circ_lib')}">
         <eg-org-selector
+          org-aria="circLib"
           alldisabled="{{!defaults.attributes.circ_lib}}"
           selected="working.circ_lib"
           noDefault
@@ -189,17 +198,19 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.ref">
-      <div class="bg-info"><label>[% l('Reference?') %]</label></div>
+      <div class="bg-info"><label id="reference">[% l('Reference?') %]</label></div>
       <div ng-class="{'bg-success': working.ref !== undefined, 'field-changed': field_changed('ref')}">
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.ref" value="t"/>
+          <label id="yesReference">
+            <input type="radio" ng-model="working.ref" value="t"
+              aria-labelledby="reference yesReference"/>
             [% l('Yes') %]
           </label>
         </div>
         <div class="col-lg-6">
-          <label>
-          <input type="radio" ng-model="working.ref" value="f"/>
+          <label id="noReference">
+          <input type="radio" ng-model="working.ref" value="f"
+            aria-labelledby="reference noReference"/>
             [% l('No') %]
           </label>
         </div>
@@ -214,9 +225,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.location">
-      <div class="bg-info"><label>[% l('Shelving Location') %]</label></div>
+      <div class="bg-info"><label id="shelvingLocation">[% l('Shelving Location') %]</label></div>
       <div ng-class="{'bg-success': working.location !== undefined, 'field-changed': field_changed('location')}">
         <select class="form-control" ng-model="working.location"
+          aria-labelledby="shelvingLocation"
           ng-options="l.id() as i18n.ou_qualified_location_name(l) for l in location_list">
         </select>
       </div>
@@ -230,17 +242,19 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.opac_visible">
-      <div class="bg-info"><label>[% l('OPAC Visible?') %]</label></div>
+      <div class="bg-info"><label id="opacVisible">[% l('OPAC Visible?') %]</label></div>
       <div ng-class="{'bg-success': working.opac_visible !== undefined, 'field-changed': field_changed('opac_visible')}">
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.opac_visible" value="t"/>
+          <label id="yesOpacVisible">
+            <input type="radio" ng-model="working.opac_visible" value="t"
+              aria-labelledby="opacVisible yesOpacVisible" />
             [% l('Yes') %]
           </label>
         </div>
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.opac_visible" value="f"/>
+          <label id="noOpacVisible">
+            <input type="radio" ng-model="working.opac_visible" value="f"
+              aria-labelledby="opacVisible noOpacVisible" />
             [% l('No') %]
           </label>
         </div>
@@ -255,9 +269,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.circ_modifier">
-      <div class="bg-info"><label>[% l('Circulation Modifier') %]</label></div>
+      <div class="bg-info"><label id="circulationModifier">[% l('Circulation Modifier') %]</label></div>
       <div ng-class="{'bg-success': working.circ_modifier !== undefined, 'field-changed': field_changed('circ_modifier')}">
         <select class="form-control"
+          aria-labelledby="circulationModifier"
           ng-model="working.circ_modifier"
           ng-options="m.code() as m.name() for m in circ_modifier_list | orderBy: 'name()'">
           <option value="">[% l('&lt;NONE&gt;') %]</option>
@@ -272,10 +287,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.price">
-      <div class="bg-info"><label>[% l('Price') %]</label></div>
+      <div class="bg-info"><label id="price">[% l('Price') %]</label></div>
       <div ng-class="{'bg-success': working.price !== undefined, 'field-changed': field_changed('price')}">
         <input class="form-control" str-to-float ng-model="working.price" 
-          type="number" step="0.01"/>
+          type="number" step="0.01" aria-labelledby="price"/>
       </div>
       <div ng-if="hasMulti()">
         <div ng-if="working.MultiMap.price.length > 1 && working.price === undefined">
@@ -286,9 +301,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.loan_duration">
-      <div class="bg-info"><label>[% l('Loan Duration') %]</label></div>
+      <div class="bg-info"><label id="loanDuration">[% l('Loan Duration') %]</label></div>
       <div ng-class="{'bg-success': working.loan_duration !== undefined, 'field-changed': field_changed('loan_duration')}">
-        <select class="form-control" int-to-str ng-model="working.loan_duration">
+        <select class="form-control" int-to-str ng-model="working.loan_duration"
+          aria-labelledby="loanDuration">
           <option value="1">[% l('Short') %]</option>
           <option value="2" selected>[% l('Normal') %]</option>
           <option value="3">[% l('Extended') %]</option>
@@ -303,10 +319,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.cost">
-      <div class="bg-info"><label>[% l('Acquisitions Cost') %]</label></div>
+      <div class="bg-info"><label id="acquisitionsCost">[% l('Acquisitions Cost') %]</label></div>
       <div ng-class="{'bg-success': working.cost !== undefined, 'field-changed': field_changed('cost')}">
         <input class="form-control" str-to-float ng-model="working.cost" 
-          type="number" step="0.01"/>
+          aria-labelledby="acquisitionsCost" type="number" step="0.01"/>
       </div>
       <div ng-if="hasMulti()">
         <div ng-if="working.MultiMap.cost.length > 1 && working.cost === undefined">
@@ -317,10 +333,11 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.circ_as_type">
-      <div class="bg-info"><label>[% l('Circulate as Type') %]</label></div>
+      <div class="bg-info"><label id="circulateAsType">[% l('Circulate as Type') %]</label></div>
       <div ng-class="{'bg-success': working.circ_as_type !== undefined, 'field-changed': field_changed('circ_as_type')}">
         <select class="form-control" ng-model="working.circ_as_type"
-          ng-options="t.code() as t.value() for t in circ_type_list">
+          ng-options="t.code() as t.value() for t in circ_type_list"
+          aria-labelledby="circulateAsType">
           <option value="">[% l('&lt;NONE&gt;') %]</option>
         </select>
       </div>
@@ -334,17 +351,19 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.holdable">
-      <div class="bg-info"><label>[% l('Holdable?') %]</label></div>
+      <div class="bg-info"><label id="holdable">[% l('Holdable?') %]</label></div>
       <div ng-class="{'bg-success': working.holdable !== undefined, 'field-changed': field_changed('holdable')}">
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.holdable" value="t"/>
+          <label id="yesHoldable">
+            <input type="radio" ng-model="working.holdable" value="t"
+              aria-labelledby="holdable yesHoldable" />
             [% l('Yes') %]
           </label>
         </div>
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.holdable" value="f"/>
+          <label id="noHoldable">
+            <input type="radio" ng-model="working.holdable" value="f"
+              aria-labelledby="holdable noHoldable" />
             [% l('No') %]
           </label>
         </div>
@@ -358,17 +377,19 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.deposit">
-      <div class="bg-info"><label>[% l('Deposit?') %]</label></div>
+      <div class="bg-info"><label id="deposit">[% l('Deposit?') %]</label></div>
       <div ng-class="{'bg-success': working.deposit !== undefined, 'field-changed': field_changed('deposit')}">
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.deposit" value="t"/>
+          <label id="yesDeposit">
+            <input type="radio" ng-model="working.deposit" value="t"
+              aria-labelledby="deposit yesDeposit" />
             [% l('Yes') %]
           </label>
         </div>
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.deposit" value="f"/>
+          <label id="noDeposit">
+            <input type="radio" ng-model="working.deposit" value="f"
+              aria-labelledby="deposit noDeposit" />
             [% l('No') %]
           </label>
         </div>
@@ -382,9 +403,9 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.deposit_amount">
-      <div class="bg-info"><label>[% l('Deposit Amount') %]</label></div>
+      <div class="bg-info"><label id="depositAmount">[% l('Deposit Amount') %]</label></div>
       <div ng-class="{'bg-success': working.deposit_amount !== undefined, 'field-changed': field_changed('deposit_amount')}">
-        <input class="form-control" str-to-float 
+        <input class="form-control" str-to-float aria-labelledby="depositAmount"
           ng-model="working.deposit_amount" type="number" step="0.01"/>
       </div>
       <div ng-if="hasMulti()">
@@ -396,9 +417,9 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.age_protect">
-      <div class="bg-info"><label>[% l('Age-based Hold Protection') %]</label></div>
+      <div class="bg-info"><label id='agebased'>[% l('Age-based Hold Protection') %]</label></div>
       <div ng-class="{'bg-success': working.age_protect !== undefined, 'field-changed': field_changed('age_protect')}">
-        <select class="form-control"
+        <select class="form-control" aria-labelledby="agebased"
           ng-model="working.age_protect"
           ng-options="a.id() as a.name() for a in age_protect_list">
           <option value="">[% l('&lt;NONE&gt;') %]</option>
@@ -413,17 +434,19 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.mint_condition">
-      <div class="bg-info"><label>[% l('Quality') %]</label></div>
+      <div class="bg-info"><label id="quality">[% l('Quality') %]</label></div>
       <div ng-class="{'bg-success': working.mint_condition !== undefined, 'field-changed': field_changed('mint_condition')}">
         <div class="col-lg-6">
-          <label>
-            <input type="radio" ng-model="working.mint_condition" value="t"/>
+          <label id="goodQuality">
+            <input type="radio" ng-model="working.mint_condition" value="t"
+              aria-labelledby="quality goodQuality" />
             [% l('Good') %]
           </label>
         </div>
         <div class="col-lg-6">
-          <label>
-            <input type="radio"ng-model="working.mint_condition" value="f"/>
+          <label id="damagedQuality">
+            <input type="radio"ng-model="working.mint_condition" value="f"
+              aria-labelledby="quality damagedQuality" />
             [% l('Damaged') %]
           </label>
         </div>
@@ -437,9 +460,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.fine_level">
-      <div class="bg-info"><label>[% l('Fine Level') %]</label></div>
+      <div class="bg-info"><label id="fineLevel">[% l('Fine Level') %]</label></div>
       <div ng-class="{'bg-success': working.fine_level !== undefined, 'field-changed': field_changed('fine_level')}">
-        <select class="form-control" int-to-str ng-model="working.fine_level">
+        <select class="form-control" int-to-str ng-model="working.fine_level"
+          aria-labelledby="fineLevel">
           <option value="1">[% l('Low') %]</option>
           <option value="2" selected>[% l('Normal') %]</option>
           <option value="3">[% l('High') %]</option>
@@ -474,10 +498,11 @@
       <div ng-if="hasMulti()"> </div>
     </li>
     <li ng-if="defaults.attributes.floating">
-      <div class="bg-info"><label>[% l('Floating') %]</label></div>
+      <div class="bg-info"><label id="floating">[% l('Floating') %]</label></div>
       <div ng-class="{'bg-success': working.floating !== undefined, 'field-changed': field_changed('floating')}">
         <select class="form-control" ng-model="working.floating"
-          ng-options="a.id() as a.name() for a in floating_list">
+          ng-options="a.id() as a.name() for a in floating_list"
+          aria-labelledby="floating">
           <option value="">[% l('&lt;NONE&gt;') %]</option>
         </select>
       </div>
@@ -502,9 +527,12 @@
       <div ng-if="hasMulti()"> </div>
     </li>
     <li ng-if="defaults.statcats">
-      <div class="bg-info"><label>[% l('Statistical Categories') %]</label></div>
+      <div class="bg-info">
+        <label id="statCats">[% l('Statistical Categories') %]</label>
+      </div>
       <div>
-        <select class="form-control" ng-disabled="!defaults.statcats"
+        <select class="form-control" aria-labelledby="statCats"
+          ng-disabled="!defaults.statcats"
           ng-model="working.statcat_filter"
           ng-options="o.id() as o.shortname() for o in statcat_filter_list">
           <option value="">[% l('Filter by Library') %]</option>
@@ -514,9 +542,12 @@
     </li>
 
     <li ng-repeat="sc in statcats | orderBy:['owner().name()','name()']" ng-if="statcat_visible(sc.owner().id())">
-      <div class="bg-info"><label>{{sc.owner().name() }} : {{ sc.name()}}</label></div>
+      <div class="bg-info">
+        <label id="statcat{{sc.id()}}">{{sc.owner().name() }} : {{ sc.name()}}</label>
+      </div>
       <div ng-class="{'bg-success': working.statcats[sc.id()] !== undefined}">
-        <select class="form-control" ng-disabled="!defaults.statcats"
+        <select class="form-control" aria-labelledby="statcat{{sc.id()}}"
+          ng-disabled="!defaults.statcats"
           ng-change="statcatUpdate(sc.id())"
           ng-model="working.statcats[sc.id()]"
           ng-options="e.id() as e.value() for e in sc.entries()"
diff --git a/Open-ILS/src/templates/staff/cat/volcopy/t_edit.tt2 b/Open-ILS/src/templates/staff/cat/volcopy/t_edit.tt2
index 668290c507..33e0e67382 100644
--- a/Open-ILS/src/templates/staff/cat/volcopy/t_edit.tt2
+++ b/Open-ILS/src/templates/staff/cat/volcopy/t_edit.tt2
@@ -3,55 +3,89 @@
     <script>window.empty_barcode_string = "[% l('Missing Barcode') %]";</script>
     <script>window.empty_label_string = "[% l('Missing Call Number') %]";</script>
     <div ng-show="!only_vols" class="btn-group">
-        <label class="btn btn-default" ng-click="show_vols = !show_vols">
-            <span ng-show="show_vols" style="padding-right: 5px;">[% l('Hide Holdings Details') %]</span>
-            <span ng-hide="show_vols" style="padding-right: 5px;">[% l('Show Holdings Details') %]</span>
-        </label>
-        <label class="btn btn-default" ng-click="show_copies = !show_copies">
+        <a href="#" class="btn btn-default" ng-click="show_vols = !show_vols">
+            <span
+                ng-show="show_vols" style="padding-right: 5px;">
+                [% l('Hide Holdings Details') %]
+            </span>
+            <span
+                ng-hide="show_vols" style="padding-right: 5px;">
+                [% l('Show Holdings Details') %]
+            </span>
+        </a>
+        <a href="#" class="btn btn-default" ng-click="show_copies = !show_copies">
             <span ng-show="show_copies" style="padding-right: 5px;">[% l('Hide Item Attributes') %]</span>
             <span ng-hide="show_copies" style="padding-right: 5px;">[% l('Show Item Attributes') %]</span>
-        </label>
+        </a>
     </div>
 
     <div class="container-fluid pad-vert" ng-show="show_vols">
         <div class="row bg-info">
-            <div class="col-xs-2"><h4 class="center-block">[% l('Batch Apply') %]</h4></div>
+            <div class="col-xs-2">
+                <h4 class="center-block">
+                    <label id="batchApply">[% l('Batch Apply') %]</label>
+                </h4>
+            </div>
             <div class="col-xs-10">
                 <div class="row">
                     <div class="col-xs-2">
-                        <select class="form-control" ng-model="batch.classification" ng-options="cl.id() as cl.name() for cl in classification_list"></select>
+                        <select class="form-control" aria-labelledby="batchApply classification"
+                            ng-model="batch.classification"
+                            ng-options="cl.id() as cl.name() for cl in classification_list"></select>
                     </div>
                     <div class="col-xs-1">
-                        <select class="form-control" ng-model="batch.prefix" ng-options="p.id() as p.label() for p in prefix_list"></select>
+                        <select class="form-control" aria-labelledby="batchApply prefix" ng-model="batch.prefix"
+                            ng-options="p.id() as p.label() for p in prefix_list"></select>
                     </div>
                     <div class="col-xs-2">
-                        <eg-basic-combo-box list="batch.marcCallNumbers" selected="batch.label"></eg-basic-combo-box>
+                        <eg-basic-combo-box combo-box-aria="batchApply callNumberLabel"
+                            list="batch.marcCallNumbers" selected="batch.label"></eg-basic-combo-box>
                     </div>
                     <div class="col-xs-1">
-                        <select class="form-control" ng-model="batch.suffix" ng-options="s.id() as s.label() for s in suffix_list"></select>
+                        <select class="form-control" aria-labelledby="batchApply suffix"
+                            ng-model="batch.suffix"
+                            ng-options="s.id() as s.label() for s in suffix_list"></select>
                     </div>
                     <div class="col-xs-1"></div>
                     <div class="col-xs-5">
-                        <button class="btn btn-default center-block" ng-click="applyBatchCNValues()" type="button">[% l('Apply') %]</button>
+                        <button aria-labelledby="batchApply applyBatchApply"
+                            class="btn btn-default center-block"
+                            ng-click="applyBatchCNValues()" type="button">
+                                <label id="applyBatchApply">[% l('Apply') %]</label>
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
         <div class="row pad-vert">
-            <div class="col-xs-1"><b>[% l('Owning Library') %]</b></div>
-            <div class="col-xs-1"><b>[% l('Call Numbers') %]</b></div>
+            <div class="col-xs-1"><label id="owningLibrary">
+                <b>[% l('Owning Library') %]</b>
+            </label></div>
+            <div class="col-xs-1"><label id="callNumbers">
+                <b>[% l('Call Numbers') %]</b>
+            </label></div>
             <div class="col-xs-10">
                 <div class="row">
-                    <div class="col-xs-2"><b>[% l('Classification') %]</b></div>
-                    <div class="col-xs-1"><b>[% l('Prefix') %]</b></div>
-                    <div class="col-xs-2"><b>[% l('Call Number Label') %]</b></div>
-                    <div class="col-xs-1"><b>[% l('Suffix') %]</b></div>
-                    <div class="col-xs-1" ng-hide="only_vols"><b>[% l('Items') %]</b></div>
+                    <div class="col-xs-2"><label id="classification">
+                        <b>[% l('Classification') %]</b>
+                    </label></div>
+                    <div class="col-xs-1"><label id="prefix">
+                        <b>[% l('Prefix') %]</b>
+                    </label></div>
+                    <div class="col-xs-2"><label id="callNumberLabel">
+                        <b>[% l('Call Number Label') %]</b>
+                    </label></div>
+                    <div class="col-xs-1"><label id="suffix">
+                        <b>[% l('Suffix') %]</b>
+                    </label></div>
+                    <div class="col-xs-1" ng-hide="only_vols"><label id="items">
+                        <b>[% l('Items') %]</b>
+                    </label></div>
                     <div class="col-xs-5" ng-hide="only_vols">
                         <div class="row">
-                            <div class="col-xs-5"><b>[% l('Barcode') %]</b></div>
-                            <div class="col-xs-3"><b>[% l('Item #') %]</b></div>
-                            <div class="col-xs-4"><b>[% l('Part') %]</b></div>
+                            <div class="col-xs-5"><label id="barcode"><b>[% l('Barcode') %]</b></label></div>
+                            <div class="col-xs-3"><label id="itemnum"><b>[% l('Item #') %]</b></label></div>
+                            <div class="col-xs-4"><label id="part"><b>[% l('Part') %]</b></label></div>
                         </div>
                     </div>
                     <div class="col-xs-2" ng-show="only_vols">
@@ -76,10 +110,20 @@
         <hr/>
         <div class="row">
             <div class="col-xs-2">
-                <eg-org-selector alldisabled="{{record_id == 0}}" selected="new_lib_to_add" onchange="changeNewLib" disable-test="cant_have_vols"></eg-org-selector>
+                <eg-org-selector org-aria="newLibrary" alldisabled="{{record_id == 0}}"
+                    selected="new_lib_to_add" onchange="changeNewLib"
+                    disable-test="cant_have_vols">
+                </eg-org-selector>
             </div>
             <div class="col-xs-2">
-                <button class="btn btn-default" ng-disabled="record_id == 0" ng-click="addLibToStruct()" type="button">[% l('Add call number') %]</button>
+                <button id="addCallNumber" class="btn btn-default"
+                    ng-disabled="record_id == 0"
+                    ng-click="addLibToStruct()" type="button">
+                    [% l('Add call number') %]
+                </button>
+            </div>
+             <div class="col-xs-8">
+                <label ng-hide="true" id="newLibrary">New Library</label>
             </div>
         </div>
     </div>
@@ -91,10 +135,10 @@
 
         <ul ng-model="copytab" class="nav nav-tabs">
           <li ng-class="{active : copytab == 'working'}">
-            <a ng-click="copytab='working'" >[% l('Working Items') %]</a>
+            <a href="#" ng-click="copytab='working'" >[% l('Working Items') %]</a>
           </li>
           <li ng-class="{active : copytab == 'complete'}">
-            <a ng-click="copytab='complete'" >[% l('Completed Items') %]</a>
+            <a href="#" ng-click="copytab='complete'" >[% l('Completed Items') %]</a>
           </li>
         </ul>
 
@@ -104,7 +148,7 @@
 
             <div class="container-fluid"> <!-- working copy editor -->
                 <div class="row give-cell-border" style="margin:0px;padding:0px">
-                    <div class="col-lg-12" style="margin:0px;padding:0px"
+                    <div class="col-lg-12" style="margin:0px;padding:0px">
                         <div ng-include="'[% ctx.base_path %]/staff/cat/volcopy/t_attr_edit'"></div>
                     </div>
                 </div>
diff --git a/Open-ILS/src/templates/staff/cat/volcopy/t_view.tt2 b/Open-ILS/src/templates/staff/cat/volcopy/t_view.tt2
index c009569421..9948c2c891 100644
--- a/Open-ILS/src/templates/staff/cat/volcopy/t_view.tt2
+++ b/Open-ILS/src/templates/staff/cat/volcopy/t_view.tt2
@@ -8,23 +8,23 @@ eg-navbar {
 </style>
 
 <eg-record-summary ng-if="!embedded && !edit_templates && record_id"
-     record-id="record_id" record="summaryRecord"></eg-record-summary>
+      record-id="record_id" record="summaryRecord"></eg-record-summary>
 
 <!-- tabbed copy data view -->
 
 <div ng-if="!edit_templates">
   <ul class="nav nav-tabs" ng-show="!embedded">
     <li ng-class="{active : tab == 'edit'}">
-      <a ng-click="tab = 'edit'" >[% l('Edit') %]</a>
+      <a href="#" ng-click="tab = 'edit'" >[% l('Edit') %]</a>
     </li>
     <li ng-class="{active : tab == 'templates'}">
-      <a ng-click="tab = 'templates'" >[% l('Item Templates') %]</a>
+      <a href="#" ng-click="tab = 'templates'" >[% l('Item Templates') %]</a>
     </li>
     <li ng-class="{active : tab == 'defaults'}">
-      <a ng-click="tab = 'defaults'" >[% l('Defaults') %]</a>
+      <a href="#" ng-click="tab = 'defaults'" >[% l('Defaults') %]</a>
     </li>
   </ul>
-  
+
   <div class="tab-content">
     <div class="tab-pane active">
       <div ng-show="tab == 'edit'">
diff --git a/Open-ILS/web/js/ui/default/staff/cat/volcopy/app.js b/Open-ILS/web/js/ui/default/staff/cat/volcopy/app.js
index 501a9c1785..d94e31fc5d 100644
--- a/Open-ILS/web/js/ui/default/staff/cat/volcopy/app.js
+++ b/Open-ILS/web/js/ui/default/staff/cat/volcopy/app.js
@@ -490,14 +490,14 @@ function(egCore , $q) {
                 '<span ng-if="is_new" class="sr-only">' + egCore.strings.VOL_COPY_NEW_ITEM + '</span>' +
                 '<div class="col-xs-5" ng-class="{'+"'has-error'"+':barcode_has_error}">'+
                     '<input id="{{callNumber.id()}}_{{copy.id()}}"'+
-                    ' eg-enter="nextBarcode(copy.id())" class="form-control"'+
+                    ' eg-enter="nextBarcode(copy.id())" class="form-control" aria-labelledby="barcode"'+
                     ' type="text" ng-model="barcode" ng-change="updateBarcode()"'+
                     ' ng-focus="selectOnFocus($event)" autofocus/>'+
                     '<div class="label label-danger" ng-if="duplicate_barcode">{{duplicate_barcode_string}}</div>'+
                     '<div class="label label-danger" ng-if="empty_barcode">{{empty_barcode_string}}</div>'+
                 '</div>'+
-                '<div class="col-xs-3"><input class="form-control" type="number" min="1" ng-model="copy_number" ng-change="updateCopyNo()"/></div>'+
-                '<div class="col-xs-3"><eg-basic-combo-box list="parts" selected="part"></eg-basic-combo-box></div>'+
+                '<div class="col-xs-3"><input class="form-control" aria-labelledby="itemnum" type="number" min="1" ng-model="copy_number" ng-change="updateCopyNo()"/></div>'+
+                '<div class="col-xs-3"><eg-basic-combo-box combo-box-aria="part" list="parts" selected="part"></eg-basic-combo-box></div>'+
             '</div>',
 
         scope: { focusNext: "=", copy: "=", callNumber: "=", index: "@", record: "@" },
@@ -603,19 +603,19 @@ function(egCore , $q) {
                 '<span ng-if="!callNumber.not_ephemeral" class="sr-only">' + egCore.strings.VOL_COPY_NEW_CALL_NUMBER + '</span>' +
                 '<div class="col-xs-2">'+
                     '<button aria-label="Delete" style="margin:-5px -15px; float:left;" ng-hide="callNumber.not_ephemeral" type="button" class="close" ng-click="removeCN()">&times;</button>' +
-                    '<select class="form-control" ng-model="classification" ng-change="updateClassification()" ng-options="cl.name() for cl in classification_list"></select>'+
+                    '<select class="form-control" aria-labelledby="classification" ng-model="classification" ng-change="updateClassification()" ng-options="cl.name() for cl in classification_list"></select>'+
                 '</div>'+
                 '<div class="col-xs-1">'+
-                    '<select class="form-control" ng-model="prefix" ng-change="updatePrefix()" ng-options="p.label() for p in prefix_list"></select>'+
+                    '<select class="form-control" aria-labelledby="prefix" ng-model="prefix" ng-change="updatePrefix()" ng-options="p.label() for p in prefix_list"></select>'+
                 '</div>'+
                 '<div class="col-xs-2">'+
-                    '<input class="form-control" type="text" ng-change="updateLabel()" ng-model="label"/>'+
+                    '<input class="form-control" aria-labelledby="callNumberLabel" type="text" ng-change="updateLabel()" ng-model="label"/>'+
                     '<div class="label label-danger" ng-if="empty_label">{{empty_label_string}}</div>'+
                 '</div>'+
                 '<div class="col-xs-1">'+
-                    '<select class="form-control" ng-model="suffix" ng-change="updateSuffix()" ng-options="s.label() for s in suffix_list"></select>'+
+                    '<select class="form-control" aria-labelledby="suffix" ng-model="suffix" ng-change="updateSuffix()" ng-options="s.label() for s in suffix_list"></select>'+
                 '</div>'+
-                '<div ng-hide="onlyVols" class="col-xs-1"><input class="form-control" type="number" ng-model="copy_count" min="{{orig_copy_count}}" ng-change="changeCPCount()"></div>'+
+                '<div ng-hide="onlyVols" class="col-xs-1"><input class="form-control" aria-labelledby="items" type="number" ng-model="copy_count" min="{{orig_copy_count}}" ng-change="changeCPCount()"></div>'+
                 '<div ng-hide="onlyVols" class="col-xs-5">'+
                     '<eg-vol-copy-edit record="{{record}}" ng-repeat="cp in copies track by idTracker(cp)" focus-next="focusNextBarcode" copy="cp" call-number="callNumber"></eg-vol-copy-edit>'+
                 '</div>'+
@@ -848,8 +848,8 @@ function(egCore , $q) {
         replace: true,
         template:
             '<div class="row">'+
-                '<div class="col-xs-1"><eg-org-selector selected="owning_lib" disable-test="cant_have_vols"></eg-org-selector></div>'+
-                '<div class="col-xs-1"><input class="form-control" type="number" min="{{orig_cn_count}}" ng-model="cn_count" ng-change="changeCNCount()"/></div>'+
+                '<div class="col-xs-1"><eg-org-selector org-aria="owningLibrary" selected="owning_lib" disable-test="cant_have_vols"></eg-org-selector></div>'+
+                '<div class="col-xs-1"><input aria-labelledby="callNumbers" class="form-control" type="number" min="{{orig_cn_count}}" ng-model="cn_count" ng-change="changeCNCount()"/></div>'+
                 '<div class="col-xs-10">'+
                     '<eg-vol-row only-vols="onlyVols" record="{{record}}"'+
                         'ng-repeat="(cn,copies) in struct" '+
-- 
2.11.0