LP1824709: Allow comboboxes inputs to have IDs

This adds a new input, domId, for the combobox component.

A good way to test:

1) Download the Wave accessibility checker.
2) Go to one of the following screens:
  - Admin > Local > Course Reserves > Choose a course > Associate
    item from catalog
  - Admin > Local > Course Reserves > Choose a course > Associate
    brief record
  - MARC Batch Import
  - MARC Batch Import/Export > Inspect Queue
  - Staff Catalog Add to bucket
  - Staff catalog conjoined items
  - Hold cancel dialog
3) Right click and select "WAVE this page"
4) On the Details tab of WAVE, notice that there are several "Missing
   form label" errors.
5) Apply this patch.
6) Run WAVE again; notice that the number of missing form label errors
   has decreased.

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Garry Collum <gcollum@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
index deda3e5..3096173 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
@@ -176,7 +176,7 @@
 
             <ng-container *ngSwitchCase="'list'">
               <eg-combobox
-                id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
+                domId="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
                 placeholder="{{field.label}}..." i18n-placeholder 
                 [required]="field.isRequired()"
                 [entries]="field.linkedValues"

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html
index afb4f57..90f01dc 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html
@@ -50,10 +50,10 @@
                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
                   <div class="input-group">
                     <div class="input-group-prepend">
-                      <span class="input-group-text" i18n>Relationship</span>
+                      <label for="associate-item-relationship" class="input-group-text" i18n>Relationship</label>
                     </div>
-                    <input type="text" [(ngModel)]="relationshipInput"
-                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" placeholder-i18n
+                    <input type="text" [(ngModel)]="relationshipInput" id="associate-item-relationship"
+                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" placeholder-i18n
                       placeholder="e.g. Required" class="flex-grow-1" />
                   </div>
                 </div>
@@ -73,8 +73,8 @@
                         <label for="associate-item-temp-call-number" i18n>Call Number</label>
                       </div>
                     </div>
-                    <input type="text" [(ngModel)]="tempCallNumber" label="associate-item-temp-call-number"
-                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'"
+                    <input type="text" [(ngModel)]="tempCallNumber" id="associate-item-temp-call-number"
+                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
                       (input)="isModifyingCallNumber = true" class="flex-grow-1" />
                     <div class="input-group-append">
                       <div class="input-group-text">
@@ -89,12 +89,13 @@
                   <div class="input-group">
                     <div class="input-group-prepend">
                       <div class="input-group-text">
-                        <span i18n>Circulation Modifier</span>
+                        <label for="temp-circ-mod" i18n>Circulation Modifier</label>
                       </div>
                     </div>
                     <eg-combobox i18n-placeholder placeholder="Circulation Modifier..." idlClass="ccm" idlField="name"
                       [displayTemplate]="idlClassLabel" [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'"
                       [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
+                      domId="temp-circ-mod"
                       (onChange)="tempCircMod = $event.id; isModifyingCircMod = true">
                     </eg-combobox>
                     <div class="input-group-append">
@@ -112,12 +113,13 @@
                   <div class="input-group">
                     <div class="input-group-prepend">
                       <div class="input-group-text">
-                        <span i18n>Item Status</span>
+                        <label for="temp-item-status" i18n>Item Status</label>
                       </div>
                     </div>
                     <eg-combobox i18n-placeholder placeholder="Item Status..." idlClass="ccs" idlField="name"
                       [displayTemplate]="idlClassLabel" [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'"
                       [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
+                      domId="temp-item-status"
                       (onChange)="tempStatus = $event.id; isModifyingStatus = true">
                     </eg-combobox>
                     <div class="input-group-append">
@@ -133,11 +135,11 @@
                   <div class="input-group">
                     <div class="input-group-prepend">
                       <div class="input-group-text">
-                        <span i18n>Shelving Location</span>
+                        <label for="temp-location" i18n>Shelving Location</label>
                       </div>
                     </div>
-                    <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1"
-                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" [(ngModel)]="tempLocation"
+                    <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1" domId="temp-location"
+                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" [(ngModel)]="tempLocation"
                       (valueChange)="isModifyingLocation = true">
                     </eg-item-location-select>
                     <div class="input-group-append">
@@ -166,10 +168,10 @@
               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
                 <div class="input-group">
                   <div class="input-group-prepend">
-                    <span class="input-group-text" i18n>Relationship</span>
+                    <label class="input-group-text" for="brief-relationship" i18n>Relationship</label>
                   </div>
-                  <input type="text" [(ngModel)]="relationshipInput"
-                    [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" placeholder-i18n
+                  <input type="text" [(ngModel)]="relationshipInput" id="brief-relationship"
+                    [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" placeholder-i18n
                     placeholder="e.g. Required" class="flex-grow-1" />
                 </div>
               </div>
@@ -207,10 +209,10 @@
                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
                   <div class="input-group">
                     <div class="input-group-prepend">
-                      <span class="input-group-text" i18n>Relationship</span>
+                      <label class="input-group-text" for="electronic-relationship" i18n>Relationship</label>
                     </div>
-                    <input type="text" [(ngModel)]="relationshipInput"
-                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" class="flex-grow-1" />
+                    <input type="text" [(ngModel)]="relationshipInput" id="electronic-relationship"
+                      [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" class="flex-grow-1" />
                   </div>
                 </div>
               </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
index ec2fa75..6652378 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
@@ -20,7 +20,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #formTemplateSelector
-        id="template-select"
+        domId="template-select"
         (onChange)="templateSelectorChange($event)"
         [allowFreeText]="true"
         [startId]="selectedTemplate"
@@ -48,7 +48,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #recordTypeSelector
-        id="type-select"
+        domId="type-select"
         (onChange)="selectEntry($event, 'recordType')"
         [disabled]="importSelection()" [required]="true"
         [startId]="recordType" placeholder="Record Type..." i18n-placeholder>
@@ -65,7 +65,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #bibSourceSelector
-        id="source-select"
+        domId="source-select"
         [entries]="formatEntries('bibSources')" 
         (onChange)="selectEntry($event, 'bibSources')"
         [startId]="selectedBibSource"
@@ -80,7 +80,7 @@
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('activeQueues')"
         #queueSelector
-        id="queue-select"
+        domId="queue-select"
         [startId]="startQueueId"
         [startIdFiresOnChange]="true"
         [disabled]="startQueueId"
@@ -95,7 +95,7 @@
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('bibBuckets')" 
         #bucketSelector
-        id="bucket-select"
+        domId="bucket-select"
         [startId]="selectedBucket"
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
         (onChange)="selectEntry($event, 'bibBuckets')"
@@ -108,7 +108,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #matchSetSelector
-        id="match-set-select"
+        domId="match-set-select"
         [entries]="formatEntries('matchSets')" 
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
         [startId]="selectedMatchSet || defaultMatchSet"
@@ -130,7 +130,7 @@
     </div>
     <div class="col-lg-3"> <!-- TODO disable for authority -->
       <eg-combobox #holdingsProfileSelector
-        id="item-import-def"
+        domId="item-import-def"
         [entries]="formatEntries('importItemDefs')"
         [startId]="selectedHoldingsProfile"
         [disabled]="(selectedQueue && !selectedQueue.freetext) || importSelection()"
@@ -152,7 +152,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #mergeProfileSelector
-        id="merge-profiles"
+        domId="merge-profiles"
         [entries]="formatEntries('mergeProfiles')"
         (onChange)="selectEntry($event, 'mergeProfiles')"
         placeholder="Merge Profile..." i18n-placeholder>
@@ -174,7 +174,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox #fallThruMergeProfileSelector
-        id="insuff-merge-profiles"
+        domId="insuff-merge-profiles"
         [entries]="formatEntries('mergeProfiles')"
         (onChange)="selectEntry($event, 'FallThruMergeProfile')"
         placeholder="Fall-Through Merge Profile..." i18n-placeholder>

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-list.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-list.component.html
index badc6df..64ab698 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-list.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-list.component.html
@@ -2,11 +2,12 @@
   <h2 i18n>Select a Queue To Inspect</h2>
   <div class="row flex">
     <div>
-      <label i18n>Queue Type</label>
+      <label for="queue-type-combobox" i18n>Queue Type</label>
     </div>
     <div class="col-lg-3">
       <eg-combobox (onChange)="queueTypeChanged($event)"
         [startId]="queueType"
+        domId="queue-type-combobox"
         placeholder="Queue Type..." i18n-placeholder>
         <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records" 
           i18n-entryLabel></eg-combobox-entry>

diff --git a/Open-ILS/src/eg2/src/app/staff/share/buckets/bucket-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/share/buckets/bucket-dialog.component.html
index e02520d..3591aa7 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/buckets/bucket-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/buckets/bucket-dialog.component.html
@@ -20,10 +20,11 @@
         <a ngbNavLink i18n>Existing bucket</a>
         <ng-template ngbNavContent>
           <div class="row mt-3">
-            <div class="col-lg-3 font-weight-bold" i18n>Name of existing bucket</div>
+            <div class="col-lg-3 font-weight-bold"><label for="existing-bucket-name">Name of existing bucket</label></div>
             <div class="col-lg-5">
               <eg-combobox [entries]="formatBucketEntries()"
                 (onChange)="bucketChanged($event)"
+                domId="existing-bucket-name"
                 placeholder="Existing Bucket..." i18n-placeholder>
               </eg-combobox>
             </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/share/holdings/conjoined-items-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/share/holdings/conjoined-items-dialog.component.html
index 33b433f..bb6cc4d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/holdings/conjoined-items-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/holdings/conjoined-items-dialog.component.html
@@ -23,7 +23,7 @@
         <div class="col-lg-8">
           <eg-combobox [entries]="peerTypes" [required]="true"
             i18n-placeholder placeholder="Peer Type..."
-            id="cbox-peer-types" (onChange)="peerTypeChanged($event)">
+            domId="cbox-peer-types" (onChange)="peerTypeChanged($event)">
           </eg-combobox>
         </div>
       </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/share/holds/cancel-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/share/holds/cancel-dialog.component.html
index a2d70cd..d100760 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/holds/cancel-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/holds/cancel-dialog.component.html
@@ -19,17 +19,17 @@
       </div>
       <div class="row mt-2">
         <div class="col-lg-4">
-          <label for="cance-reasons" i18n>Cancel Reason</label>
+          <label for="cancel-reasons" i18n>Cancel Reason</label>
         </div>
         <div class="col-lg-8">
-          <eg-combobox id='cancel-reasons' [entries]="cancelReasons"
+          <eg-combobox domId='cancel-reasons' [entries]="cancelReasons"
             [startId]="5" (onChange)="cancelReason = $event ? $event.id : null">
           </eg-combobox>
         </div>
       </div>
       <div class="row mt-2">
         <div class="col-lg-4">
-          <label for="cance-note" i18n>Cancel Note</label>
+          <label for="cancel-note" i18n>Cancel Note</label>
         </div>
         <div class="col-lg-8">
           <textarea id='cancel-note' class="form-control"

diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/simplified-editor/simplified-editor.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/simplified-editor/simplified-editor.component.html
index 2bb887d..9dab545 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/simplified-editor/simplified-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/simplified-editor/simplified-editor.component.html
@@ -1,17 +1,20 @@
 <ng-container *ngIf="editor && subfieldLabels && marcForms && marcTypes">
   <form [formGroup]="editor">
     <div class="row">
-      <div class="col-lg-3" i18n>Form</div>
+      <div class="col-lg-3"><label i18n for="{{idPrefix}}-form">Form</label></div>
       <div class="col-lg-9">
-        <eg-combobox #formCombobox [entries]="marcForms" formControlName="marcForm" [selectedId]="defaultMarcForm">
+        <eg-combobox #formCombobox [entries]="marcForms" formControlName="marcForm"
+          [selectedId]="defaultMarcForm" domId="{{idPrefix}}-form">
           <eg-combobox-entry entryId=" " entryLabel="<None selected>" i18n-entryLabel></eg-combobox-entry>
         </eg-combobox>
       </div>
     </div>
     <div class="row">
-      <div class="col-lg-3" i18n>Type</div>
+      <div class="col-lg-3"><label for="{{idPrefix}}-type" i18n>Type</label></div>
       <div class="col-lg-9">
-        <eg-combobox #typeCombobox [entries]="marcTypes" formControlName="marcType" selectedId="a"></eg-combobox>
+        <eg-combobox #typeCombobox [entries]="marcTypes" formControlName="marcType"
+          selectedId="a" domId="{{idPrefix}}-type">
+        </eg-combobox>
       </div>
     </div>
     <ng-container *ngFor="let field of fields">