'Tab-Index for absolutely positioned elements in layout

Tab Index for Absolute-Position Elements

For the time being, lets assume I wrote the code below:

    <header class="header hap" [ngClass]="authority">
        <div class="header-inner">
            <div class="header-identity">
                <a id="theLogo" class="logo" [routerLink]="[links.home]" title="Navigate to Home">
                    <img src="assets/logo-white.svg" alt="Logo">
                </a>
                <span class="client-logo" *ngIf="user.brandingImage && !user.isTheAdmin()">
                    <img class="brandingImage" [src]="user.brandingImage" [alt]="user.brandingName" onerror="this.style.display='none'">
                </span>
                [ more links ]
            </div>
            <nav class="main-nav for authenticated" [ngClass]="{'active':showMenu, 'app-only':!isCurrPageAdminApp()}">
                <button class="menu" (click)="toggleMenu()">Menu</button>
                <div class="main-nav-flyout" *ngIf="showMenu">
                    <div class="nav-header">
                        <ul>
                            <li>
                                <a id="main-nav-profile" [routerLink]="['/profile']"><span class="icon icon-user2"></span> My Profile</a>
                            </li>
                            [ more dropdown items ]
                        </ul>
                        <a id="main-nav-close" class="close"(click)="onClickMenuClose()"><span class="icon-cross"></span></a>
                    </div>
                    <div class="nav-body">
                        <ul *ngIf="isCurrPageAdminApp()" class="main-nav-list">
                            <li class="current-app">Administrative Tools</li>
                            <li><a id="main-nav-xAdmin" *ngIf="user.isTheAdmin()" [routerLink]="['admin/x']">X Admin</a></li>
                            [ more links ]
                            <li>
                                <span>Reports</span>
                                <ul>
                                    <li class="user-status"><a id="main-nav-userStatusReport" [routerLink]="['admin/reports/userStatus']">User Status</a></li>
                                    [ more links ]
                                </ul>
                            </li>
                        </ul>
                        <ul class="app-list" *ngIf="user.userApplications">
                            <li *ngIf="showTheLink()">
                                <a id="app-list-type" [routerLink]="['/']">
                                    ...
                                </a>
                            </li>
                            [ more links ]
                            <li *ngFor="let application of user?.userApplications">
                                <a id="app-list-{{application.abbreviation}}" *ngIf="!isAdminApp(application)" (click)="onClickMenuItem(application)">
                                    {{ application.title }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <nav class="user-nav for authenticated" role="menu">
                <span *ngIf="user.brandingName" class="user-location">{{user.brandingName}}</span>
                <span *ngIf="user.brandingName" class="pipe">|</span>
                <a id="user-nav-profile" class="user-name" [routerLink]="['/profile']">
                    <span class="name">{{user?.firstName}} {{user?.lastName}}</span>
                </a>
                <a id="user-nav-logout" class="logout" [routerLink]="['/', 'logout']">Log out</a>
            </nav>
        </div>
    </header>

Issue

Various elements -- probably .header-inner > * -- are styled using position: absolute;, so the tabindex-order is skewed for elements which are declared later in the markup but positioned geometrically earlier in the layout.

Question

Is there a way to force the tabindex to be, say, all natural indices (0) except for 2 items that need to be switched -- in a scalable way while not having to implement tabindex for every new item in the layout?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source