LP2101884 MARC Rich Editor subfield tabbing order

Changes the MARC rich editor keyboard navigation behavior so that either
the right or left arrows can be used to move from grouped subfield focus
(with all three inputs highlighted at once) into the subfield for
editing. Also moves focus into the subfield value rather than the code.

Additionally, changes the tabindex of the currently focused subfield
group to -1 so that the group is not part of the tabbing order when
moving out of the subfield inputs (in either direction). That is,
tabbing out of the subfield group goes directly to the next or previous
group rather than the current one.

Release-note: Edit MARC subfield value in focused group with right or
left arrow; do not focus on current group when tabbing into or out of
subfield inputs

Signed-off-by: Stephanie Leary <[email protected]>
Signed-off-by: Ruth Frasur Davis <[email protected]>
Signed-off-by: Terran McCanna <[email protected]>

Author: stephanieleary

Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html

@@ -33,6 +33,7 @@
 <ng-container *ngIf="!bigText">
 
   <eg-combobox #MARCCombo *ngIf="suggest"
+    trigger="click"
     [domId]="domId"
     [moreClasses]="'fw-bold form-control-sm type-'+fieldType"
     tabindex="{{tabindex}}"

Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor-context.ts

@@ -439,24 +439,20 @@ export class MarcEditContext {
         this.insertSubfield(field, newSf);
     }
 
-    // Focus the requested subfield by its position.  If its
-    // position is less than zero, focus the field's tag instead.
+    // Focus the requested subfield by its position.
     focusSubfield(field: MarcField, position: number, group?: boolean) {
-
-        const focus: FieldFocusRequest = {fieldId: field.fieldId, target: 'tag'};
-
-        if (position >= 0) {
-            // Focus the code instead of the value, because attempting to
-            // focus an empty (editable) div results in nothing getting focus.
-            focus.target = 'sfc';
-            focus.sfOffset = position;
-        }
+        // console.debug("focusSubfield()", field, position, group);
+        const focus: FieldFocusRequest = {fieldId: field.fieldId, target: 'sfv'};
 
         if (group) {
             focus.target = 'group';
-            focus.sfOffset = position;
+        } else if (position < 0) {
+            // Focus the code instead of the value
+            focus.target = 'sfc';
         }
 
+        focus.sfOffset = position;
+
         this.requestFieldFocus(focus);
     }
 

Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html

@@ -150,7 +150,7 @@ <h3 i18n>Keyboard Shortcuts</h3>
         <li i18n>Copy Current Row Above: Ctrl+Up</li>
         <li i18n>Copy Current Row Below: Ctrl+Down</li>
         <li i18n>Add Subfield: Ctrl+D or Ctrl+I</li>
-        <li i18n>Edit Subfield (when grouped): Right Arrow</li>
+        <li i18n>Edit Subfield (when grouped): Left or Right Arrow</li>
         <li i18n>Remove Row: Ctrl+Del</li>
         <li i18n>Remove Subfield: Shift+Del</li>
         <li i18n>Open Suggestions: Ctrl+Shift+Down</li>
@@ -318,10 +318,10 @@ <h3 i18n>Keyboard Shortcuts</h3>
               'full-width': subfield[1].length > 100 || context.isFullWidth(field.tag, subfield[0]),
               'last': last
             }"
-            tabindex="0"
-            [id]="'subfield-{{subfield[2]}}'"
+            [tabindex]="getSubfieldTabindex(field, subfield)"
+            [id]="getSubfieldDomId(field, subfield)"
             (keydown)="onKeyDown($event, field, subfield)"
-            attr.aria-description="Press right arrow to edit." 
+            [attr.aria-description]="'Press right or left arrow to edit.'" 
             i18n-aria-label i18n-aria-description>
             <ng-container #subfieldContent
               *ngTemplateOutlet="subfieldChunk;context:{field:field,subfield:subfield,tabIndex:context.subfieldHasFocus(field, subfield) ? 0 : -1}">

Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts

@@ -213,6 +213,7 @@ export class MarcRichEditorComponent implements OnInit {
 
     onKeyDown(evt: KeyboardEvent, field: MarcField, subfield?: MarcSubfield) {
         switch (evt.key) {
+            case 'ArrowLeft':
             case 'ArrowRight':
                 // console.debug("ArrowRight: ", evt, field, subfield);
                 let el = evt.target as HTMLElement;
@@ -349,6 +350,18 @@ export class MarcRichEditorComponent implements OnInit {
         evt.stopPropagation();
     }
 
+    getSubfieldDomId(field, subfield) {
+        return 'subfield-' + field.tag+subfield[0] + '-' + subfield[2];
+    }
+
+    getSubfieldTabindex(field, subfield) {
+        const subfieldGroupElement = document.getElementById(this.getSubfieldDomId(field, subfield)) as HTMLElement;
+        if (subfieldGroupElement?.contains(document.activeElement)) {
+            return -1;
+        }
+        return 0;
+    }
+
     focusSubfieldGroup(field: MarcField, subfield: MarcSubfield) {
         // set lastFocused to subfield group for undo/redo purposes,
         // but do not emit a focus request