I need to have link for skipping navigation panel in angular, the moving to content part is working fine but tab order is not following. Problem is when user activates the skip to main content link, Page moves to 'main' anchor, but if user continues to navigate with keyboard using tab, the next item is still next link in the navigation bar, so that doesn't solve the problem. How can i make it so when page moves to main content and user presses tab the tab order continues from the main content?
Currently i have <a [routerLink]="" (click)="skipToMain('main')" > Move to main </a>
And in ts file
skipToMain(id) {
this.router.navigate([], {fragment:id}
}
Also tried with this.viewportScroller.scrollToAnchor(id)
When you are skipping to main content i.e. in the click event handler, find the main element and set focus programmatically
let element = document.querySelector('[role="main"]')
element.setAttribute('tabindex','-1') // You can set tabindex in HTML too than in JS
element.focus()