Tab order of layout is broken when using side panel with application header

[chintankavathia]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Affected component

side-panel

Summary

Currently, when a side panel is used on a page that includes an application header, the tab order is disrupted.

Additionally, when the side panel is opened as an overlay, keyboard focus is not properly trapped within it — pressing Tab allows focus to escape to elements behind the overlay.

Version

latest

Steps to reproduce

1. Go to example https://element.siemens.io/element-examples/#/overview/si-side-panel/si-side-panel-collapsible?q=side

2. Start using keyboard tab to move focus

3. Observe tab focus order

Code reproduction example

https://stackblitz.com/run?file=src%2Fapp%2Fsi-side-panel%2Fsi-side-panel-collapsible.ts

What is the current bug behavior

Tab order first goes inside side panel and then move back to application header.

What is the expected correct behavior

Tab order should be similar order the way components are visible on browser starting from top left to right

[dr-itz]

it's a problem of DOM structure. Our example https://element.siemens.io/element-examples/#/overview/si-layouts/anatomy?q=lay does it correctly, tab-order is fine there IMO

focus trap is a real problem

[chintankavathia]

it's a problem of DOM structure. Our example https://element.siemens.io/element-examples/#/overview/si-layouts/anatomy?q=lay does it correctly, tab-order is fine there IMO

focus trap is a real problem

Yes the example can be fixed but there is still problem when acordian with collapsible panel icon is used inside side panel content. tab order breaks for those icons within side panel when they are all collapsed.