EXUI-2488 Index navigation - media viewer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/media-viewer",
-  "version": "4.1.8",
+  "version": "4.1.8-exui-2488-1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/media-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/media-viewer",
-  "version": "4.1.8",
+  "version": "4.1.8-exui-2488-1",
   "description": "Media Viewer",
   "keywords": [
     "Angular",

projects/media-viewer/src/lib/viewers/pdf-viewer/side-bar/side-bar.component.html

@@ -37,7 +37,16 @@
     </button>
   </div>
 </div>
-<div #sidebar id="sidebarContent" cdkScrollable (scroll)="onScroll($event)" [hidden]="!sidebarOpen">
+<div 
+  #sidebar
+  id="sidebarContent"
+  cdkScrollable
+  (scroll)="onScroll($event)"
+  [hidden]="!sidebarOpen"
+  tabIndex="-1"
+  role="region"
+  aria-label="Document sidebar"
+>
   <div id="outlineView" class="outlineWithDeepNesting">
     <div class="outlineItem" *ngIf="selectedView === 'outline'">
       <mv-outline-item

projects/media-viewer/src/lib/viewers/pdf-viewer/side-bar/side-bar.component.spec.ts

@@ -9,6 +9,7 @@ import { PdfJsWrapperFactory } from '../pdf-js/pdf-js-wrapper.provider';
 import { ViewerEventService } from '../../viewer-event.service';
 import { LoadBookmarks } from '../../../store/actions/bookmark.actions';
 import { Outline } from './outline-item/outline.model';
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
 
 describe('SideBarComponent', () => {
   let component: SideBarComponent;
@@ -123,4 +124,32 @@ describe('SideBarComponent', () => {
     component.hasTreeChanged(false);
     expect(component.treeChanged).toEqual(false)
   });
-});
+
+  describe('sidebar focus functionality', () => {
+    let toolbarEvents: ToolbarEventService;
+    let sidebarElement: HTMLElement;
+
+    beforeEach(() => {
+      toolbarEvents = TestBed.inject(ToolbarEventService);
+      sidebarElement = fixture.nativeElement.querySelector('#sidebarContent');
+    });
+
+    it('should set focus to sidebar when sidebar is opened', fakeAsync(() => {
+      spyOn(sidebarElement, 'focus');
+
+      toolbarEvents.sidebarOpen.next(true);
+      tick(0);
+
+      expect(sidebarElement.focus).toHaveBeenCalled();
+    }));
+
+    it('should not set focus to sidebar when sidebar is closed', fakeAsync(() => {
+      spyOn(sidebarElement, 'focus');
+
+      toolbarEvents.sidebarOpen.next(false);
+      tick(0);
+
+      expect(sidebarElement.focus).not.toHaveBeenCalled();
+    }));
+  });
+});

projects/media-viewer/src/lib/viewers/pdf-viewer/side-bar/side-bar.component.ts

@@ -5,7 +5,7 @@ import { select, Store } from '@ngrx/store';
 import * as bookmarksSelectors from '../../../store/selectors/bookmark.selectors';
 import { BookmarkNode } from '../../../store/models/bookmarks.interface';
 import { CreateBookmark, LoadBookmarks } from '../../../store/actions/bookmark.actions';
-import { take } from 'rxjs/operators';
+import { filter, delay } from 'rxjs/operators';
 import { v4 as uuid } from 'uuid';
 import { ViewerEventService } from '../../viewer-event.service';
 import { BookmarksState } from '../../../store/reducers/bookmarks.reducer';
@@ -51,6 +51,14 @@ export class SideBarComponent implements OnInit, OnChanges, OnDestroy {
       }),
       this.toolbarEvents.sidebarOpen.subscribe(toggle => {
         this.sidebarOpen = toggle;
+      }),
+      this.toolbarEvents.sidebarOpen.pipe(
+        filter(toggle => toggle === true),
+        delay(0)
+      ).subscribe(() => {
+        if (this.sidebarDiv?.nativeElement) {
+            this.sidebarDiv.nativeElement.focus();
+        }
       })
     );
     this.subscriptions.push(this.store.pipe(select(bookmarksSelectors.getScrollTop)).subscribe(scrollTopValue => {