Incorrect Tabbing Order Due to Gutter Placement in Split Areas

[jakubmank2]

Description:
The current tabbing order is misaligned due to the placement of the gutter after split areas. This forces the user to tab through all split areas before being able to set focus on the gutter, even though it is visually located between split areas. The issue becomes particularly noticeable when the second split area contains focusable elements, as the tab order does not match the UI presentation.

Proposed Solution:
A more intuitive approach would be to place the gutter between split areas in the DOM structure. This would ensure the tabbing order reflects the visual layout of the UI.

To reproduce:
Here is a demo that illustrates the problem: the user must tab over all buttons in the second split area before being able to set focus on the gutter.
https://stackblitz.com/edit/angular-split-demo-cwuovy?file=src%2Fapp%2Fapp.component.html

Temporary Workaround:
In the meantime, we are utilizing Renderer2 to move the gutter between split areas after view initialization as a temporary solution to this problem. However, an inherent fix in the library would be greatly appreciated.

[Harpush]

I think that's a little tough to fix. It currently uses content projection for the areas and ngFor for the gutters. Due to this flex order was used to create correct placement. In order to put the gutters in between we need to use content children here and dynamically insert in the correct places. The downside is we must have the content of the split area become a template which is a breaking change and a little tougher DX wise.

@beeman that's a bit of a big change to DX too. I wonder what's best here. We could move the gutters around with native dom manipulation but I don't really like it. Do you have a better idea except templates for split area content?

The only other idea I have is maybe @for can help here. The main problem here is you must not use ng-content inside structural directives. But if I remember correctly that limitation was lifted with the new control flow in v17.