Accessibility Ionic 4 routing focus is at the bottom of the page

i have this really annoying problem in my Ionic 4 application that when I change page the screen reader focus is at the bottom of the page which means that my users will have to reverse through the content to get to my main content section.

i did some research and this seems to be a problem with Angular Angular accessibility documentation

Here they suggest that you should set focus on the main content.

However when I attempt this using:

  ionViewDidEnter() {
    const mainHeader = document.querySelector('#mainContent');
    if (mainHeader) {
      (mainHeader as HTMLElement)?.focus();
    }
  }

it doesn't really do anything.

Has anyone had a similar issue and know how I might fix it?

Edit

I have also tried with the viewChild:

  @ViewChild('mainPage') mainContent: ElementRef;    
  ngOnInit() {
    this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
      this.mainContent.nativeElement.focus();
    });
  }

And setting the mainPage element's tabIndex=0:

<div #mainPage tabindex="0"><ion-router-outlet main></ion-router-outlet></div>

Yet still no focus.

from Accessibility Ionic 4 routing focus is at the bottom of the page