I have multiple editable inputs on my screen .

Between theses editable inputs I have buttons and disabled inputs.

The actual behavior is when I press Tab the html elements between the current input and next one get focused. I should so press Tab until I get to my sibling Input.

This behavior is not what I want.

What I'm expecting is that when I press Tab the next desired Input get Focused.

Here a simplified code

    <ng-container #form *ngFor="let elm of elms; let currIndex = index" cdkTrapFocus
        [cdkTrapFocusAutoCapture]="true">
      <app-item [index]="currIndex">
    Here I get a line with : span, disabled input , editable input then a button
      </app-item>
    </ng-container>

I tried to use a directive that focus next sibling depending on it's not working due to complex nested html elements inside app-item.

I would like to know if there is a much simpler solution using Angular CDK and "tag" desired items to focus using tab key ?