Hey I have 2 issues regarding focusing some elements on a page when pressing tab
The highligted tab when empty dont focus when tabbing through the page. I need those to focus even when empty.
tabs that do focus are focusing in the wrong order. at the moment it is going from left to right. When in actuallaty it should go up to bottom starting with the atm withdraw column and moving to the pos purchase column when finished going through ATM. At the moment the tab order just goes from atm withdraw to other atm withdraw to maximum limit to other maximum limit etc. It needs to go from atm to max limit to perm to temp all under atm withdraw first before tabbing to the other column/
HTML CODE below
<section id="atm-withdrawal-pos-purchase" class="atm-withdrawal-pos-purchase-moredet_innerGrid" role="region" aria-labelledby="hdrAccountDetailsGeneral">
<div *ngIf="!showLoader">
<div *ngIf="!isBUICEntitled && !valueNotReceivedFromCCAV" class="atm-withdrawal-pos-purchase-error-grid">
<div class="atm-withdrawal-pos-purchase-error-grid-message">You do not have access for Change Limits</div>
</div>
<div *ngIf="valueNotReceivedFromCCAV" class="atm-withdrawal-pos-purchase-content-error-grid">
<div class="atm-withdrawal-pos-purchase-modal-dialog-icon"><i class="sw-icon sw-icon-alert-error"></i></div>
<div class="atm-withdrawal-pos-purchase-content-error-grid-message">
<p class="atm-withdrawal-pos-purchase-content-detail">{{requestName}} {{enumMessage.WARNING_GENERIC_MESSAGE}}</p>
</div>
</div>
<div *ngIf="isAccountDetailFailed" class="atm-withdrawal-pos-purchase-content-error-grid">
<div class="atm-withdrawal-pos-purchase-modal-dialog-icon"><i class="sw-icon sw-icon-alert-error"></i></div>
<div class="atm-withdrawal-pos-purchase-content-error-grid-message">
<p class="atm-withdrawal-pos-purchase-content-detail">{{enumMessage.ACCOUNT_DETAILS_GENERIC_MESSAGE}}</p>
<ul class="atm-withdrawal-pos-purchase-content-list">
<li>{{accountDetailsFailureMsg}}</li>
</ul>
</div>
</div>
<div *ngIf="isBUICEntitled && !isAccountDetailFailed && !valueNotReceivedFromCCAV">
<div class="atm-withdrawal-pos-purchase-moredet-general-grid">
<div class="atm-withdrawal-pos-purchase-moredet-header-half">
<h3 class="atm-withdrawal-pos-purchase-accnt-det-card-header atm-withdrawal-pos-purchase-header" id="hdrAccountDetailsGeneral">ATM Withdrawal</h3>
</div>
<div class="atm-withdrawal-pos-purchase-moredet-header-half">
<h3 class="atm-withdrawal-pos-purchase-accnt-det-card-header atm-withdrawal-pos-purchase-linked-acc-right-header atm-withdrawal-pos-purchase-header" id="hdrAccountDetailsGeneralPOS">POS Purchase</h3>
<div class="atm-withdrawal-pos-purchase-adrs-grid-head-link">
<button title="Edit"
class="atm-withdrawal-pos-purchase-account-det-btn atm-withdrawal-pos-purchase-editBtn"
*ngIf="isEditEntitled && isThirdPartyEntitled"
(click)="validateAcca()"
[ngClass]="{'atm-withdrawal-pos-purchase-disabledEditButton': isEditable}"
[disabled]="isEditable"
[hidden]="!isVisible">
Edit
</button>
</div>
</div>
</div>
<div class="atm-withdrawal-pos-purchase-moredet-general-grid-row"
[ngClass]="{'atm-withdrawal-pos-purchase-grid-row-edit': isEditable,'atm-withdrawal-pos-purchase-grid-row': !isEditable}">
<div tabindex="0" class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">
<label tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="default_limit">Default Limit</label>
<input tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field atm-withdrawal-pos-purchase-padding-right-50"
aria-labelledby="hdrAccountDetailsGeneral default_limit" type="text" value="{{atmWithdrawalData?.defaultLimit}}" readonly="readonly">
</div>
<div class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">
<label tabindex="0"class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="pos_default_limit">Default Limit</label>
<input tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field"
aria-labelledby="hdrAccountDetailsGeneralPOS pos_default_limit" type="text" value="{{posPurchaseData?.defaultLimit}}" readonly="readonly">
</div>
</div>
<div class="atm-withdrawal-pos-purchase-moredet-general-grid-row"
[ngClass]="{'atm-withdrawal-pos-purchase-grid-row-edit': isEditable,'atm-withdrawal-pos-purchase-grid-row': !isEditable}">
<div class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">
<label tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="max_limit">Maximum Limit</label>
<input tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field atm-withdrawal-pos-purchase-padding-right-50"
aria-labelledby="hdrAccountDetailsGeneral max_limit" type="text" value="{{atmWithdrawalData?.maximumLimit}}" readonly="readonly">
</div>
<div class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">
<label tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="pos_max-limit">Maximum Limit</label>
<input tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field"
aria-labelledby="hdrAccountDetailsGeneralPOS pos_max-limit" type="text" value="{{posPurchaseData?.maximumLimit}}" readonly="readonly">
</div>
</div>
<div class="atm-withdrawal-pos-purchase-moredet-general-grid-row"
[ngClass]="{'atm-withdrawal-pos-purchase-grid-row-edit': isEditable,'atm-withdrawal-pos-purchase-grid-row': !isEditable}">
<div class="atm-withdrawal-pos-purchase-moredet-content-half-wrapper">
<label tabindex="0" class="atm-withdrawal-pos-purchase-general-grid-detail-item atm-withdrawal-pos-purchase-input-label" id="per_limit">Permanent Limit</label>
<input tabindex="0" *ngIf="!isEditable" class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-input-field atm-withdrawal-pos-purchase-padding-right-50"
aria-labelledby="hdrAccountDetailsGeneral per_limit" type="text" value="{{atmWithdrawalData?.permanentLimit}}" readonly="readonly">
<div *ngIf="isEditable"
[ngClass]="{'atm-withdrawal-pos-purchase-edit-input-error-border': atmPermLimitErrorFlag,
'atm-withdrawal-pos-purchase-focus-outline':atmPermLimitEleFocused}"
class="atm-withdrawal-pos-purchase-edit-input-wraper atm-withdrawal-pos-purchase-padding-right-43px">
<span tabindex="0" class="atm-withdrawal-pos-purchase-error-icon"
[ngClass]="{'atm-withdrawal-pos-purchase-disableErrorIconBg': atmPermLimitDisplayError}"
(mouseenter)="atmPermLimitDisplayError = true"
(mouseleave)="atmPermLimitDisplayError = false"
(focus)="atmPermLimitDisplayError = true"
(focusout)="atmPermLimitDisplayError = false"
tabindex="0"
aria-live="assertive"
aria-labelledby="atmPermLimitError"
[ngStyle]="{'visibility': atmPermLimit.errors?.atmLimitValidateError?'visible':'hidden'}">
<div [innerHTML]="atmPermLimit.errors?.message"
class="adahidden"></div>
<span class="sw-icon"
[ngClass]="{'atm-withdrawal-pos-purchase-error-icon-scale sw-icon-alert-error': !atmPermLimitDisplayError,'atm-withdrawal-pos-purchase-error-icon-scale-hover sw-icon-12-error-alert-white-tiny': atmPermLimitDisplayError}"></span>
</span>
<span class="atm-withdrawal-pos-purchase-edit-dollar-sign">$</span>
<input atmLimitValidate="{{atmWithdrawalData.maximumLimit}}:PermanentLimit"
(focus)="atmPermLimitEleFocused = true;"
(focusout)="atmPermLimitEleFocused = false;"
(keydown)="restrictFirstZero($event)"
class="atm-withdrawal-pos-purchase-general-grid-det-val atm-withdrawal-pos-purchase-read-only-input atm-withdrawal-pos-purchase-edit-input-field"
aria-labelledby="hdrAccountDetailsGeneral per_limit" type="text"
[ngClass]="{'atmPermLimitError': atmPermLimit.errors?.atmLimitValidateError}"
(input)="onInputValueChange('AtmPermanentLimit')"
maxlength="4"
#atmPermLimitEle
#atmPermLimit="ngModel"
[(ngModel)]="atmPermanentLimit">
<div *ngIf="atmPermLimitDisplayError && atmPermLimit.errors?.atmLimitValidateError && atmPermLimit.errors?.atmLimitValidateDisplayMessage"
role="alert" class="atm-withdrawal-pos-purchase-error-message-block">
<div id="atmPermLimitError"
[innerHTML]="atmPermLimit.errors?.message"
class="atm-withdrawal-pos-purchase-error-message-block-container">
</div>
</div>
<div tabindex="0" *ngIf="atmPermLimit.errors?.atmLimitValidateError">
<span class="adahidden">
Error in ATM Withdrawal Permanent Limit. {{atmPermLimit.errors?.message}}
</span>
</div>
</div>
</div>
<div class="atm-withdrawal-pos-purchase-moredet-conte
I tried setting specific tab index to change order but no order was changed