Enhancement: Add support for arrow key navigation in document-detail view

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -47,12 +47,12 @@
     </button>
 
     <div class="button-group">
-        <button type="button" class="btn btn-sm btn-outline-primary me-2" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
+        <button type="button" class="btn btn-sm btn-outline-primary me-2" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()" (keyup)="onLeftArrowKeyUp($event)">
             <svg class="buttonicon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#arrow-left" />
             </svg>
         </button>
-        <button type="button" class="btn btn-sm btn-outline-primary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
+        <button type="button" class="btn btn-sm btn-outline-primary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()" (keyup)="onRightArrowKeyUp($event)">
             <svg class="buttonicon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
             </svg>

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -643,6 +643,74 @@ describe('DocumentDetailComponent', () => {
     expect(component.password).toEqual('foobar')
   })
 
+  it('should support Left Arrow key for previous page', () => {
+    initNormally()
+    const previousMock = jest.spyOn(component, "hasPrevious")
+    previousMock.mockReturnValue(true)
+    const previousSpy = jest.spyOn(documentListViewService, 'getPrevious')
+    previousSpy.mockReturnValue(of(100))
+    fixture.detectChanges()
+    const prevBtn = fixture.debugElement.query(
+      By.css('button[title="Previous"]')
+    )
+    expect(prevBtn).toBeDefined()
+    prevBtn.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { code: 'ArrowLeft' })
+    )
+    expect(previousSpy).toHaveBeenCalled()
+  })
+
+  it('should not support Left Arrow key for previous page if no page exists', () => {
+    initNormally()
+    const previousMock = jest.spyOn(component, "hasPrevious")
+    previousMock.mockReturnValue(false)
+    const previousSpy = jest.spyOn(documentListViewService, 'getPrevious')
+    previousSpy.mockReturnValue(of(100))
+    fixture.detectChanges()
+    const prevBtn = fixture.debugElement.query(
+      By.css('button[title="Previous"]')
+    )
+    expect(prevBtn).toBeDefined()
+    prevBtn.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { code: 'ArrowLeft' })
+    )
+    expect(previousSpy).not.toHaveBeenCalled()
+  })
+
+  it('should support Right Arrow key for next page', () => {
+    initNormally()
+    const nextMock = jest.spyOn(component, "hasNext")
+    nextMock.mockReturnValue(true)
+    const nextSpy = jest.spyOn(documentListViewService, 'getNext')
+    nextSpy.mockReturnValue(of(100))
+    fixture.detectChanges()
+    const nextBtn = fixture.debugElement.query(
+      By.css('button[title="Next"]')
+    )
+    expect(nextBtn).toBeDefined()
+    nextBtn.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { code: 'ArrowRight' })
+    )
+    expect(nextSpy).toHaveBeenCalled()
+  })
+
+  it('should not support Right Arrow key for next page if no page exists', () => {
+    initNormally()
+    const nextMock = jest.spyOn(component, "hasNext")
+    nextMock.mockReturnValue(false)
+    const nextSpy = jest.spyOn(documentListViewService, 'getNext')
+    nextSpy.mockReturnValue(of(100))
+    fixture.detectChanges()
+    const nextBtn = fixture.debugElement.query(
+      By.css('button[title="Next"]')
+    )
+    expect(nextBtn).toBeDefined()
+    nextBtn.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { code: 'ArrowRight' })
+    )
+    expect(nextSpy).not.toHaveBeenCalled()
+  })
+
   it('should update n pages after pdf loaded', () => {
     initNormally()
     component.pdfPreviewLoaded({ numPages: 1000 } as any)

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -731,6 +731,18 @@ export class DocumentDetailComponent
     }
   }
 
+  onLeftArrowKeyUp(event: KeyboardEvent) {
+    if ('ArrowLeft' == event.code && this.hasPrevious()) {
+      this.previousDoc()
+    }
+  }
+
+  onRightArrowKeyUp(event: KeyboardEvent) {
+    if ('ArrowRight' == event.code && this.hasNext()) {
+      this.nextDoc()
+    }
+  }
+
   onPasswordKeyUp(event: KeyboardEvent) {
     if ('Enter' == event.key) {
       this.password = (event.target as HTMLInputElement).value