fix(side-panel): fix tabbed navigation

[robertwilde]

Closes #1841

Fix keyboard tab order and focus management in si-side-panel. Main content is now rendered before .side-panel in the DOM so tab order matches visual layout (app header before side panel). cdkTrapFocus prevents focus escaping when the panel is open as an overlay. An inert attribute eliminates ghost tab stops during the close animation in non-collapsible over mode. si-side-panel-actions is moved to the end of the DOM and repositioned visually with CSS order: -1, so collapsed accordion headers are tabbed before action buttons, matching their visual order in the icon-strip state.

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• charts-ng
• dashboards-ng
• element-ng
• element-translate-ng
• maps-ng
• native-charts-ng

[gemini-code-assist]

Code Review

This pull request enhances the side panel component's accessibility and layout by implementing focus trapping with CdkTrapFocus and managing the inert attribute based on the panel's state. Additionally, the template structure for side panel actions was adjusted. Feedback was provided regarding a potentially unintended CSS rule for .rpanel-statusactions that might have been included by mistake.

[gemini-code-assist]

This CSS rule appears to be unintended. It applies order: -1 to .rpanel-statusactions, which moves the status actions block to the top of its flex container. The pull request description justifies reordering si-side-panel-actions for accessibility reasons, but does not mention status actions. This might be a copy-paste artifact. If this reordering is not intentional, this rule should be removed to prevent unexpected layout changes.

[robertwilde]

@dr-itz @chintankavathia I thought I'd give this a shot.

[dr-itz]

status-action tab-order when the panel is expanded makes no sense to me. Before the collapsed order was weird, now it's the expanded order.

@panch1739 @hbxes why do we move the status actions to the bottom when collapsed? I mean if these are important enough to be on top in expanded state, then why shouldn't the be on top in collapsed state as well?

I.e. expanded:

collapsed, current behaviour:

collapsed, but keep order (proposal):

[robertwilde]

In general I find the behavior that the icons disappear when the side panel is expanded, confusing. If the actions are reordered, keeping the icons could help.