#StackBounty: #javascript #angular #accessibility #ionic4 Accessibility Ionic 4 routing focus is at the bottom of the page

Bounty: 200

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.