LP1852782 MARC editable content aria-labels

Label fixed fields by their respective labels.  Label tags, indicators,
subfield codes, and values with generic terms indicating their purpose.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html
index 359128c..5dd8c29 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html
@@ -5,6 +5,7 @@
     spellcheck="false"
     class="d-inline-block text-dark text-break {{moreClasses}}"
     [attr.tabindex]="fieldText ? -1 : ''"
+    [attr.aria-label]="ariaLabel"
     [egContextMenu]="contextMenuEntries()"
     (menuItemSelected)="contextMenuChange($event.value)"
     (keydown)="inputKeyDown($event)"
@@ -23,6 +24,7 @@
     [maxlength]="maxLength || ''"
     [disabled]="fieldText" 
     [attr.tabindex]="fieldText ? -1 : ''"
+    [attr.aria-label]="ariaLabel"
     [egContextMenu]="contextMenuEntries()"
     (menuItemSelected)="contextMenuChange($event.value)"
     (keydown)="inputKeyDown($event)"

diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts
index c4d848d..c6c1ebc 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts
@@ -36,6 +36,9 @@ export class EditableContentComponent
     // space-separated list of additional CSS classes to append
     @Input() moreClasses: string;
 
+    // aria-label text.  This will not be visible in the UI.
+    @Input() ariaLabel: string;
+
     get record(): MarcRecord { return this.context.record; }
 
     bigText = false;

diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.html
index e2e8976..fa11fef 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.html
@@ -3,12 +3,13 @@
 
   <div class="d-flex">
     <div class="flex-4">
-      <span id='label-{{randId}}' class="text-left font-weight-bold">
+      <span id="label-{{randId}}" class="text-left font-weight-bold">
         {{fieldLabel}}
       </span>
     </div>
       <div class="flex-5">
-        <eg-marc-editable-content [context]="context"
+        <eg-marc-editable-content
+          [context]="context" [ariaLabel]="fieldLabel"
           [fixedFieldCode]="fieldCode" fieldType="ffld" moreClasses="p-1">
         </eg-marc-editable-content>
       </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html
index cf21442..16d1649 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html
@@ -73,12 +73,14 @@
 
     <!-- LEADER -->
     <div class="row pt-0 pb-0 pl-3 form-horizontal">
-      <eg-marc-editable-content [context]="context" fieldType="tag" 
+      <eg-marc-editable-content
+        [context]="context" fieldType="tag"
         fieldText="LDR" i18n-fieldText moreClasses="p-1">
       </eg-marc-editable-content>
 
-      <eg-marc-editable-content [context]="context" fieldType="ldr"
-         moreClasses="p-1 pr-2">
+      <eg-marc-editable-content
+        [context]="context" fieldType="ldr"
+        ariaLabel="Leader" i18n-ariaLabel moreClasses="p-1 pr-2">
       </eg-marc-editable-content>
     </div>
 
@@ -86,12 +88,14 @@
     <div class="row pt-0 pb-0 pl-3 form-horizontal" 
       *ngFor="let field of controlFields()">
 
-      <eg-marc-editable-content [context]="context" fieldType="tag"
-        [field]="field" moreClasses="p-1">
+      <eg-marc-editable-content
+        [context]="context" [field]="field" fieldType="tag"
+        ariaLabel="Control Field Tag" i18n-ariaLabel moreClasses="p-1">
       </eg-marc-editable-content>
 
-      <eg-marc-editable-content [context]="context" fieldType="cfld"
-        [field]="field" moreClasses="p-1">
+      <eg-marc-editable-content
+        [context]="context" [field]="field" fieldType="cfld"
+        ariaLabel="Control Field Content" i18n-ariaLabel moreClasses="p-1">
       </eg-marc-editable-content>
     </div>
 
@@ -100,18 +104,21 @@
       *ngFor="let field of dataFields()">
 
       <!-- TAG -->
-      <eg-marc-editable-content [context]="context" fieldType="tag"
-        [field]="field" moreClasses="p-1">
+      <eg-marc-editable-content
+        [context]="context" [field]="field" fieldType="tag"
+        ariaLabel="Data Field Tag" i18n-ariaLabel moreClasses="p-1">
       </eg-marc-editable-content>
 
       <!-- INDICATOR 1 -->
-      <eg-marc-editable-content [context]="context" fieldType="ind1" 
-        [field]="field" moreClasses="p-1">
+      <eg-marc-editable-content
+        [context]="context" [field]="field" fieldType="ind1"
+        ariaLabel="Data Field Indicator 1" i18n-ariaLabel moreClasses="p-1">
       </eg-marc-editable-content>
 
       <!-- INDICATOR 2 -->
-      <eg-marc-editable-content [context]="context" fieldType="ind2" 
-        [field]="field" moreClasses="p-1">
+      <eg-marc-editable-content
+        [context]="context" [field]="field" fieldType="ind2"
+        ariaLabel="Data Field Indicator 2" i18n-ariaLabel moreClasses="p-1">
       </eg-marc-editable-content>
 
       <!-- SUBFIELDS -->
@@ -123,14 +130,17 @@
         </eg-marc-editable-content>
 
         <!-- SUBFIELD CHARACTER -->
-        <eg-marc-editable-content [context]="context" fieldType="sfc" 
-          [field]="field" [subfield]="subfield" 
+        <eg-marc-editable-content
+          [context]="context" [field]="field" fieldType="sfc"
+          [subfield]="subfield" ariaLabel="Subfield Code" i18n-ariaLabel
           moreClasses="sf-code border-left-0 p-1 pl-0">
         </eg-marc-editable-content>
 
         <!-- SUBFIELD VALUE -->
-        <eg-marc-editable-content [context]="context" fieldType="sfv"
-          [field]="field" [subfield]="subfield" moreClasses="p-1 pt-2">
+        <eg-marc-editable-content
+          [context]="context" [field]="field" fieldType="sfv"
+          [subfield]="subfield" ariaLabel="Subfield Value" i18n-ariaLabel
+          moreClasses="p-1 pt-2">
         </eg-marc-editable-content>
       </ng-container>
     </div>