7

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.

Marc Rasmussen
  • 19,771
  • 79
  • 203
  • 364
  • Is there something it dev console? – Dawid Wekwejt Jul 12 '21 at 07:42
  • @DawidWekwejt no sadly not – Marc Rasmussen Jul 13 '21 at 07:42
  • Could it be a timing issue? Is the focus being set too early and then whatever causes the focus to end up at the bottom of the page moves the focus again. Should be easy to test just add a 2 second delay to the focus change and see if it works. If this is the case then you just need to find the right place to hook into so it changes the focus after whatever Angular is doing to break it. – GrahamTheDev Jul 18 '21 at 14:31
  • Has there been any progress on this? A fix from Ionic side? – Andy Jul 31 '22 at 10:19

0 Answers0