This is an automated email from the git hooks/post-receive script. It was generated because a ref change was pushed to the repository containing the project "Evergreen ILS". The branch, main has been updated via bd3ea719ce11cfb2cdf48df080ae662bb26648d6 (commit) from 7e312a090065fb7f96ae0fb79861e16e169fdde4 (commit) Those revisions listed above that are new to this repository have not appeared on any other notification email; so we list those revisions in full, below. - Log ----------------------------------------------------------------- commit bd3ea719ce11cfb2cdf48df080ae662bb26648d6 Author: Stephanie Leary <stephanie.leary@equinoxoli.org> Date: Wed Apr 2 00:49:47 2025 +0000 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 <stephanie.leary@equinoxoli.org> Signed-off-by: Ruth Frasur Davis <redavis4974@gmail.com> Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org> 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 aa558a1db8..3922b5abe8 100644 --- 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 @@ -33,6 +33,7 @@ Track their labels here. <ng-container *ngIf="!bigText"> <eg-combobox #MARCCombo *ngIf="suggest" + trigger="click" [domId]="domId" [moreClasses]="'fw-bold form-control-sm type-'+fieldType" tabindex="{{tabindex}}" diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor-context.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor-context.ts index cfce36f413..1df38c3658 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor-context.ts +++ b/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); } 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 adf09a07c8..a439ab51ef 100644 --- 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 @@ -150,7 +150,7 @@ <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 @@ '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}"> diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts index 655156c8bb..36b6efbc2c 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts +++ b/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 ----------------------------------------------------------------------- Summary of changes: .../share/marc-edit/editable-content.component.html | 1 + .../src/app/staff/share/marc-edit/editor-context.ts | 20 ++++++++------------ .../staff/share/marc-edit/rich-editor.component.html | 8 ++++---- .../staff/share/marc-edit/rich-editor.component.ts | 13 +++++++++++++ 4 files changed, 26 insertions(+), 16 deletions(-) hooks/post-receive -- Evergreen ILS