From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Thu, 17 Sep 2020 21:13:54 +0000 (-0700)
Subject: LP1824709: Allow comboboxes inputs to have IDs
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=965eed0754eee7ef213d635e8217b9f981d1e3a9;p=Evergreen.git

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 d831cab471..518125ccaa 100644
--- 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 e7954aa7f6..f165d26ece 100644
--- 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,9 +50,9 @@
                 <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"
+                    <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>
@@ -73,7 +73,7 @@
                         <label for="associate-item-temp-call-number" i18n>Call Number</label>
                       </div>
                     </div>
-                    <input type="text" [(ngModel)]="tempCallNumber" label="associate-item-temp-call-number"
+                    <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">
@@ -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,10 +135,10 @@
                   <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"
+                    <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>
@@ -166,9 +168,9 @@
               <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"
+                  <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>
@@ -207,9 +209,9 @@
                 <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"
+                    <input type="text" [(ngModel)]="relationshipInput" id="electronic-relationship"
                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" class="flex-grow-1" />
                   </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 d95f5a3a5a..02f065fc5d 100644
--- 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 248fdba683..0ce7bd3e90 100644
--- 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 f92f9d6c02..402f217fb3 100644
--- 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
@@ -23,10 +23,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 33b433fe45..bb6cc4d4c7 100644
--- 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 a2d70cd9fa..d100760eb1 100644
--- 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 2bb887d9ef..9dab545b62 100644
--- 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">