If you are encountered with accessibility implementation, it is a bit hard to figure out which option is best to handle reusable components for focus or handle the accessibility.

Here I would discuss the approach which worked really well for me.

Step 1. Ceate header html and skip to main content link

<header id="header">
    <div class="header fixed-top">
        <div class="topheader">
            <div class="container row">
                
                <div class="col-sm-4 col-4 p-0 d-none d-sm-block text-center"><a class="accessibility d-inline-block" role="button" (click)="skipPathClicked()" [href]="skipPath">Skip to main content</a></div>
          
            </div>
        </div>
    </div>
</header>

#angular #web-development