[TileLayout] Incorrect Tab navigation with custom content

[georgi-sla]

Description

Currently, when the developer renders a more complex component with its own keyboard navigation such as the Kendo UI for Angular Charts, Grid, or Spreadsheet, the component breaks the default keyboard navigation of the TileLayout and pressing the Tab focuses the component rather than the next tile.

Steps To Reproduce

1. Create a TileLayout component.
2. Render a component with its own keyboard navigation (Grid, Chart, or Spreadsheet).
3. Set the navigable property of the TileLayout to true.
4. Navigate the TileLayout using the Tab key.

Check out the following StackBlitz demo: https://stackblitz.com/edit/angular-qmfr69ei

Screenshots or video

No response

Actual Behavior

By default, pressing the Tab key should focus the next tile in the TileLayout. However, in this configuration, pressing the Tab key focuses the custom component and thus breaks the expected keyboard navigation of the TileLayout.

Expected Behavior

Pressing the Tab key should focus the next tile in the TileLayout regardless of the content.

Browser

All

Browser version

latest

OS type

MacOS

OS version

No response

Last working version of the Kendo UI for Angular package (if regression).

No response