From 04db706fd785b88efd4e3df320c1acd14496a160 Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Tue, 16 May 2023 16:00:50 +0000
Subject: [PATCH] LP1887869 WIP Revised form labels for item edits

Revises the accessibility work previously done on the item edits and
item templates tabs to simplify the <label> strategy and avoid
potentially empty aria-labelledby attributes (which would override any
other valid labels).

Also changes <a> to <button> for click events, to allow keyboard access.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---
 .../templates/staff/cat/volcopy/t_attr_edit.tt2    | 178 ++++++++++-----------
 .../src/templates/staff/cat/volcopy/t_edit.tt2     |  55 +++----
 .../src/templates/staff/cat/volcopy/t_view.tt2     |   8 +-
 .../web/js/ui/default/staff/cat/volcopy/app.js     |  20 +--
 4 files changed, 123 insertions(+), 138 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 4532985ba0..10e9c687fa 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,11 +51,11 @@
   <form novalidate class="css-form" name="forms.myForm">
   <div class="row bg-info">
     <div class="col-md-1">
-      <h5><label id="template">[% l('Template') %]</label></h5>
+      <h5><label for="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"
-        combo-box-aria="template" selected="template_name"></eg-basic-combo-box>
+        id="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>
@@ -74,9 +74,9 @@
         </div>
         <div class="col-md-8">
           <div class="btn-group pull-right">
-            <label class="btn btn-default btn-file" id="import">
+            <label class="btn btn-default btn-file" for="import">
               [% l('Import') %]
-              <input aria-labelledby="import" type="file" eg-file-reader
+              <input id="import" type="file" eg-file-reader
                 container="imported_templates.data">
             </label>
             <button class="btn btn-default"
@@ -138,31 +138,29 @@
 
   <ul class="copy-attributes-grid">
     <li ng-if="defaults.attributes.circulate">
-      <div class="bg-info"><label id="circulate">[% l('Circulate?') %]</label></div>
+      <fieldset>
+      <div class="bg-info"><legend>[% l('Circulate?') %]</legend></div>
       <div ng-class="{'bg-success': working.circulate !== undefined, 'field-changed': field_changed('circulate')}">
         <div class="col-lg-6">
-          <label id="yesCirc">
-            <input type="radio" ng-model="working.circulate" value="t"
-              aria-labelledby="circulate yesCirc" />
-            [% l('Yes') %]
-          </label>
+          <input type="radio" ng-model="working.circulate" value="t"
+              id="yesCirc" />
+            <label for="yesCirc">[% l('Yes') %]</label>
         </div>
         <div class="col-lg-6">
-          <label id="noCirc">
-            <input type="radio" ng-model="working.circulate" value="f"
-              aria-labelledby="circulate noCirc"/>
-            [% l('No') %]
-          </label>
+          <input type="radio" ng-model="working.circulate" value="f"
+              id="noCirc"/>
+            <label for="noCirc">[% l('No') %]</label>
         </div>
       </div>
+      </fieldset>
       <!-- this dummy div ensures each <li> has exactly 3 vertical 
           flex divs, ensuring consistent widget/label height -->
       <div ng-if="hasMulti()"> </div>
     </li>
     <li ng-if="defaults.attributes.status">
-      <div class="bg-info"><label id="status">[% l('Status') %]</label></div>
+      <div class="bg-info"><label for="status">[% l('Status') %]</label></div>
       <div ng-class="{'bg-success': working.status !== undefined, 'field-changed': field_changed('status')}">
-        <select class="form-control" aria-labelledby="status"
+        <select class="form-control" id="status"
           ng-model="working.status"
           ng-options="s.id() as s.name() disable when magic_status_list.indexOf(s.id(),0) > -1 for s in status_list">
         </select>
@@ -199,23 +197,21 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.ref">
-      <div class="bg-info"><label id="reference">[% l('Reference?') %]</label></div>
+      <fieldset>
+      <div class="bg-info"><legend>[% l('Reference?') %]</legend></div>
       <div ng-class="{'bg-success': working.ref !== undefined, 'field-changed': field_changed('ref')}">
         <div class="col-lg-6">
-          <label id="yesReference">
-            <input type="radio" ng-model="working.ref" value="t"
-              aria-labelledby="reference yesReference"/>
-            [% l('Yes') %]
-          </label>
+          <input type="radio" ng-model="working.ref" value="t"
+              id="yesReference"/>
+            <label for="yesReference">[% l('Yes') %]</label>
         </div>
         <div class="col-lg-6">
-          <label id="noReference">
           <input type="radio" ng-model="working.ref" value="f"
-            aria-labelledby="reference noReference"/>
-            [% l('No') %]
-          </label>
+            id="noReference"/>
+            <label id="noReference">[% l('No') %]</label>
         </div>
       </div>
+      </fieldset>
       <div ng-if="hasMulti()">
         <div 
           ng-if="working.MultiMap.ref.length > 1 && working.ref === undefined">
@@ -226,10 +222,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.location">
-      <div class="bg-info"><label id="shelvingLocation">[% l('Shelving Location') %]</label></div>
+      <div class="bg-info"><label for="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"
+          id="shelvingLocation"
           ng-options="l.id() as i18n.ou_qualified_location_name(l) for l in location_list">
         </select>
       </div>
@@ -243,23 +239,21 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.opac_visible">
-      <div class="bg-info"><label id="opacVisible">[% l('OPAC Visible?') %]</label></div>
+      <fieldset>
+      <div class="bg-info"><legend>[% l('OPAC Visible?') %]</legend></div>
       <div ng-class="{'bg-success': working.opac_visible !== undefined, 'field-changed': field_changed('opac_visible')}">
         <div class="col-lg-6">
-          <label id="yesOpacVisible">
-            <input type="radio" ng-model="working.opac_visible" value="t"
-              aria-labelledby="opacVisible yesOpacVisible" />
-            [% l('Yes') %]
-          </label>
+          <input type="radio" ng-model="working.opac_visible" value="t"
+              id="yesOpacVisible" />
+            <label for="yesOpacVisible">[% l('Yes') %]</label>
         </div>
         <div class="col-lg-6">
-          <label id="noOpacVisible">
-            <input type="radio" ng-model="working.opac_visible" value="f"
-              aria-labelledby="opacVisible noOpacVisible" />
-            [% l('No') %]
-          </label>
+          <input type="radio" ng-model="working.opac_visible" value="f"
+              id="noOpacVisible" />
+            <label for="noOpacVisible">[% l('No') %]</label>
         </div>
       </div>
+      </fieldset>
       <div ng-if="hasMulti()">
         <div
           ng-if="working.MultiMap.opac_visible.length > 1 && working.opac_visible === undefined">
@@ -271,11 +265,11 @@
     </li>
     <li ng-if="defaults.attributes.circ_modifier">
       <div class="bg-info">
-        <label id="circulationModifier">[% l('Circulation Modifier') %]</label>
+        <label for="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"
+          id="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>
@@ -290,10 +284,10 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.price">
-      <div class="bg-info"><label id="price">[% l('Price') %]</label></div>
+      <div class="bg-info"><label for="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"
-          aria-labelledby="price" type="number" step="0.01"/>
+          id="price" type="number" step="0.01"/>
       </div>
       <div ng-if="hasMulti()">
         <div ng-if="working.MultiMap.price.length > 1 && working.price === undefined">
@@ -305,11 +299,11 @@
     </li>
     <li ng-if="defaults.attributes.loan_duration">
       <div class="bg-info">
-        <label id="loanDuration">[% l('Loan Duration') %]</label>
+        <label for="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"
-          aria-labelledby="loanDuration">
+          id="loanDuration">
           <option value="1">[% l('Short') %]</option>
           <option value="2" selected>[% l('Normal') %]</option>
           <option value="3">[% l('Extended') %]</option>
@@ -325,11 +319,11 @@
     </li>
     <li ng-if="defaults.attributes.cost">
       <div class="bg-info">
-        <label id="acquisitionsCost">[% l('Acquisitions Cost') %]</label>
+        <label for="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" 
-          aria-labelledby="acquisitionsCost" type="number" step="0.01"/>
+          id="acquisitionsCost" type="number" step="0.01"/>
       </div>
       <div ng-if="hasMulti()">
         <div ng-if="working.MultiMap.cost.length > 1 && working.cost === undefined">
@@ -341,12 +335,12 @@
     </li>
     <li ng-if="defaults.attributes.circ_as_type">
       <div class="bg-info">
-        <label id="circulateAsType">[% l('Circulate as Type') %]</label>
+        <label for="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"
-          aria-labelledby="circulateAsType">
+          id="circulateAsType">
           <option value="">[% l('&lt;NONE&gt;') %]</option>
         </select>
       </div>
@@ -360,25 +354,23 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.holdable">
+      <fieldset>
       <div class="bg-info">
-        <label id="holdable">[% l('Holdable?') %]</label>
+        <legend>[% l('Holdable?') %]</legend>
       </div>
       <div ng-class="{'bg-success': working.holdable !== undefined, 'field-changed': field_changed('holdable')}">
         <div class="col-lg-6">
-          <label id="yesHoldable">
-            <input type="radio" ng-model="working.holdable" value="t"
-              aria-labelledby="holdable yesHoldable" />
-            [% l('Yes') %]
-          </label>
+          <input type="radio" ng-model="working.holdable" value="t"
+              id="yesHoldable" />
+            <label for="yesHoldable">[% l('Yes') %]</label>
         </div>
         <div class="col-lg-6">
-          <label id="noHoldable">
-            <input type="radio" ng-model="working.holdable" value="f"
-              aria-labelledby="holdable noHoldable" />
-            [% l('No') %]
-          </label>
+          <input type="radio" ng-model="working.holdable" value="f"
+              id="noHoldable" />
+            <label for="noHoldable">[% l('No') %]</label>
         </div>
       </div>
+      </fieldset>
       <div ng-if="hasMulti()">
         <div ng-show="working.MultiMap.holdable.length > 1 && working.holdable === undefined">
           <eg-list-counts label="[% l('Multiple values') %]" 
@@ -388,25 +380,23 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.deposit">
+      <fieldset>
       <div class="bg-info">
-        <label id="deposit">[% l('Deposit?') %]</label>
+        <legend>[% l('Deposit?') %]</legend>
       </div>
       <div ng-class="{'bg-success': working.deposit !== undefined, 'field-changed': field_changed('deposit')}">
         <div class="col-lg-6">
-          <label id="yesDeposit">
-            <input type="radio" ng-model="working.deposit" value="t"
-              aria-labelledby="deposit yesDeposit" />
-            [% l('Yes') %]
-          </label>
+          <input type="radio" ng-model="working.deposit" value="t"
+              id="yesDeposit" />
+            <label for="yesDeposit">[% l('Yes') %]</label>
         </div>
         <div class="col-lg-6">
-          <label id="noDeposit">
-            <input type="radio" ng-model="working.deposit" value="f"
-              aria-labelledby="deposit noDeposit" />
-            [% l('No') %]
-          </label>
+          <input type="radio" ng-model="working.deposit" value="f"
+              id="noDeposit" />
+            <label for="noDeposit">[% l('No') %]</label>
         </div>
       </div>
+      </fieldset>
       <div ng-if="hasMulti()">
         <div ng-if="working.MultiMap.deposit.length > 1 && working.deposit === undefined">
           <eg-list-counts label="[% l('Multiple values') %]" 
@@ -417,10 +407,10 @@
     </li>
     <li ng-if="defaults.attributes.deposit_amount">
       <div class="bg-info">
-        <label id="depositAmount">[% l('Deposit Amount') %]</label>
+        <label for="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 aria-labelledby="depositAmount"
+        <input class="form-control" str-to-float id="depositAmount"
           ng-model="working.deposit_amount" type="number" step="0.01"/>
       </div>
       <div ng-if="hasMulti()">
@@ -433,10 +423,10 @@
     </li>
     <li ng-if="defaults.attributes.age_protect">
       <div class="bg-info">
-        <label id='agebased'>[% l('Age-based Hold Protection') %]</label>
+        <label for='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" aria-labelledby="agebased"
+        <select class="form-control" id="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>
@@ -451,25 +441,23 @@
       </div>
     </li>
     <li ng-if="defaults.attributes.mint_condition">
+      <fieldset>
       <div class="bg-info">
-        <label id="quality">[% l('Quality') %]</label>
+        <legend>[% l('Quality') %]</legend>
       </div>
       <div ng-class="{'bg-success': working.mint_condition !== undefined, 'field-changed': field_changed('mint_condition')}">
         <div class="col-lg-6">
-          <label id="goodQuality">
-            <input type="radio" ng-model="working.mint_condition" value="t"
-              aria-labelledby="quality goodQuality" />
-            [% l('Good') %]
-          </label>
+          <input type="radio" ng-model="working.mint_condition" value="t"
+              id="goodQuality" />
+            <label for="goodQuality">[% l('Good') %]</label>
         </div>
         <div class="col-lg-6">
-          <label id="damagedQuality">
-            <input type="radio"ng-model="working.mint_condition" value="f"
-              aria-labelledby="quality damagedQuality" />
-            [% l('Damaged') %]
-          </label>
+          <input type="radio"ng-model="working.mint_condition" value="f"
+              id="damagedQuality" />
+            <label for="damagedQuality">[% l('Damaged') %]</label>
         </div>
       </div>
+      </fieldset>
       <div ng-if="hasMulti()">
         <div ng-if="working.MultiMap.mint_condition.length > 1 && working.mint_condition === undefined">
           <eg-list-counts label="[% l('Multiple values') %]" 
@@ -480,11 +468,11 @@
     </li>
     <li ng-if="defaults.attributes.fine_level">
       <div class="bg-info">
-        <label id="fineLevel">[% l('Fine Level') %]</label>
+        <label for="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"
-          aria-labelledby="fineLevel">
+          id="fineLevel">
           <option value="1">[% l('Low') %]</option>
           <option value="2" selected>[% l('Normal') %]</option>
           <option value="3">[% l('High') %]</option>
@@ -520,12 +508,12 @@
     </li>
     <li ng-if="defaults.attributes.floating">
       <div class="bg-info">
-        <label id="floating">[% l('Floating') %]</label>
+        <label for="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"
-          aria-labelledby="floating">
+          id="floating">
           <option value="">[% l('&lt;NONE&gt;') %]</option>
         </select>
       </div>
@@ -551,10 +539,10 @@
     </li>
     <li ng-if="defaults.statcats">
       <div class="bg-info">
-        <label id="statCats">[% l('Statistical Categories') %]</label>
+        <label for="statCats">[% l('Statistical Categories') %]</label>
       </div>
       <div>
-        <select class="form-control" aria-labelledby="statCats"
+        <select class="form-control" id="statCats"
           ng-disabled="!defaults.statcats"
           ng-model="working.statcat_filter"
           ng-options="o.id() as o.shortname() for o in statcat_filter_list">
@@ -566,10 +554,10 @@
 
     <li ng-repeat="sc in statcats | orderBy:['owner().name()','name()']" ng-if="statcat_visible(sc.owner().id())">
       <div class="bg-info">
-        <label id="statcat{{sc.id()}}">{{sc.owner().name() }} : {{ sc.name()}}</label>
+        <label for="statcat{{sc.id()}}">{{sc.owner().name() }} : {{ sc.name()}}</label>
       </div>
       <div ng-class="{'bg-success': working.statcats[sc.id()] !== undefined}">
-        <select class="form-control" aria-labelledby="statcat{{sc.id()}}"
+        <select class="form-control" id="statcat{{sc.id()}}"
           ng-disabled="!defaults.statcats"
           ng-change="statcatUpdate(sc.id())"
           ng-model="working.statcats[sc.id()]"
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 33e0e67382..f8ac15d85b 100644
--- a/Open-ILS/src/templates/staff/cat/volcopy/t_edit.tt2
+++ b/Open-ILS/src/templates/staff/cat/volcopy/t_edit.tt2
@@ -3,7 +3,7 @@
     <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">
-        <a href="#" class="btn btn-default" ng-click="show_vols = !show_vols">
+        <button class="btn btn-default" ng-click="show_vols = !show_vols">
             <span
                 ng-show="show_vols" style="padding-right: 5px;">
                 [% l('Hide Holdings Details') %]
@@ -12,75 +12,75 @@
                 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">
+        </button>
+        <button 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>
-        </a>
+        </button>
     </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">
-                    <label id="batchApply">[% l('Batch Apply') %]</label>
+                    [% l('Batch Apply') %]
                 </h4>
             </div>
             <div class="col-xs-10">
                 <div class="row">
                     <div class="col-xs-2">
-                        <select class="form-control" aria-labelledby="batchApply classification"
+                        <select class="form-control" aria-label="Batch Apply 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" aria-labelledby="batchApply prefix" ng-model="batch.prefix"
+                        <select class="form-control" aria-label="Batch Apply 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 combo-box-aria="batchApply callNumberLabel"
+                        <eg-basic-combo-box aria-label="Batch Apply Call Number Label"
                             list="batch.marcCallNumbers" selected="batch.label"></eg-basic-combo-box>
                     </div>
                     <div class="col-xs-1">
-                        <select class="form-control" aria-labelledby="batchApply suffix"
+                        <select class="form-control" aria-label="Batch Apply 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 aria-labelledby="batchApply applyBatchApply"
+                        <button
                             class="btn btn-default center-block"
                             ng-click="applyBatchCNValues()" type="button">
-                                <label id="applyBatchApply">[% l('Apply') %]</label>
+                                [% l('Apply') %]
                         </button>
                     </div>
                 </div>
             </div>
         </div>
         <div class="row pad-vert">
-            <div class="col-xs-1"><label id="owningLibrary">
+            <div class="col-xs-1">
                 <b>[% l('Owning Library') %]</b>
-            </label></div>
-            <div class="col-xs-1"><label id="callNumbers">
+            </div>
+            <div class="col-xs-1">
                 <b>[% l('Call Numbers') %]</b>
-            </label></div>
+            </div>
             <div class="col-xs-10">
                 <div class="row">
-                    <div class="col-xs-2"><label id="classification">
+                    <div class="col-xs-2">
                         <b>[% l('Classification') %]</b>
-                    </label></div>
-                    <div class="col-xs-1"><label id="prefix">
+                    </div>
+                    <div class="col-xs-1">
                         <b>[% l('Prefix') %]</b>
-                    </label></div>
-                    <div class="col-xs-2"><label id="callNumberLabel">
+                    </div>
+                    <div class="col-xs-2">
                         <b>[% l('Call Number Label') %]</b>
-                    </label></div>
-                    <div class="col-xs-1"><label id="suffix">
+                    </div>
+                    <div class="col-xs-1">
                         <b>[% l('Suffix') %]</b>
-                    </label></div>
-                    <div class="col-xs-1" ng-hide="only_vols"><label id="items">
+                    </div>
+                    <div class="col-xs-1" ng-hide="only_vols">
                         <b>[% l('Items') %]</b>
-                    </label></div>
+                    </div>
                     <div class="col-xs-5" ng-hide="only_vols">
                         <div class="row">
                             <div class="col-xs-5"><label id="barcode"><b>[% l('Barcode') %]</b></label></div>
@@ -110,7 +110,7 @@
         <hr/>
         <div class="row">
             <div class="col-xs-2">
-                <eg-org-selector org-aria="newLibrary" alldisabled="{{record_id == 0}}"
+                <eg-org-selector aria-label="New Library" alldisabled="{{record_id == 0}}"
                     selected="new_lib_to_add" onchange="changeNewLib"
                     disable-test="cant_have_vols">
                 </eg-org-selector>
@@ -122,9 +122,6 @@
                     [% l('Add call number') %]
                 </button>
             </div>
-             <div class="col-xs-8">
-                <label ng-hide="true" id="newLibrary">New Library</label>
-            </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 9948c2c891..3a9618e697 100644
--- a/Open-ILS/src/templates/staff/cat/volcopy/t_view.tt2
+++ b/Open-ILS/src/templates/staff/cat/volcopy/t_view.tt2
@@ -8,20 +8,20 @@ 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 href="#" ng-click="tab = 'edit'" >[% l('Edit') %]</a>
+      <button class="btn btn-link" ng-click="tab = 'edit'" >[% l('Edit') %]</button>
     </li>
     <li ng-class="{active : tab == 'templates'}">
-      <a href="#" ng-click="tab = 'templates'" >[% l('Item Templates') %]</a>
+      <button class="btn btn-link" ng-click="tab = 'templates'" >[% l('Item Templates') %]</button>
     </li>
     <li ng-class="{active : tab == 'defaults'}">
-      <a href="#" ng-click="tab = 'defaults'" >[% l('Defaults') %]</a>
+      <button class="btn btn-link" ng-click="tab = 'defaults'" >[% l('Defaults') %]</button>
     </li>
   </ul>
 
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 f42854fe7e..fac5e7d39a 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
@@ -562,14 +562,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" aria-labelledby="barcode"'+
+                    ' eg-enter="nextBarcode(copy.id())" class="form-control" aria-label="Barcode"'+
                     ' type="text" ng-model="barcode" ng-model-options="{ debounce: 500 }" 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" 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 class="col-xs-3"><input class="form-control" aria-label="Item Number" type="number" min="1" ng-model="copy_number" ng-change="updateCopyNo()"/></div>'+
+                '<div class="col-xs-3"><eg-basic-combo-box aria-label="Part" list="parts" selected="part"></eg-basic-combo-box></div>'+
             '</div>',
 
         scope: { focusNext: "=", copy: "=", callNumber: "=", index: "@", record: "@" },
@@ -675,19 +675,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" aria-labelledby="classification" ng-model="classification" ng-change="updateClassification()" ng-options="cl.name() for cl in classification_list"></select>'+
+                    '<select class="form-control" aria-label="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" aria-labelledby="prefix" ng-model="prefix" ng-change="updatePrefix()" ng-options="p.label() for p in prefix_list"></select>'+
+                    '<select class="form-control" aria-label="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" aria-labelledby="callNumberLabel" type="text" ng-change="updateLabel()" ng-model="label"/>'+
+                    '<input class="form-control" aria-label="Call Number Label" type="text" ng-change="updateLabel()" ng-model="label"/>'+
                     '<div class="label label-danger" ng-if="empty_label && require_label">{{empty_label_string}}</div>'+
                 '</div>'+
                 '<div class="col-xs-1">'+
-                    '<select class="form-control" aria-labelledby="suffix" ng-model="suffix" ng-change="updateSuffix()" ng-options="s.label() for s in suffix_list"></select>'+
+                    '<select class="form-control" aria-label="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" aria-labelledby="items" 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-label="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>'+
@@ -931,8 +931,8 @@ function(egCore , $q) {
         replace: true,
         template:
             '<div class="row">'+
-                '<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-1"><eg-org-selector aria-label="Owning Library" selected="owning_lib" disable-test="cant_have_vols"></eg-org-selector></div>'+
+                '<div class="col-xs-1"><input aria-label="Call Numbers" 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