Allow programmatic focus and focus the first focussable nested element in a modal

Prerequisites

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

What happened?

I encountered an issue when trying to set the initial focus on a button within a confirmation modal using the ix-modal component.

My approach was to use the focus method from the native browser API in combination with ViewChild, within the AfterViewInit lifecycle hook. However, the focus state did not appear on the button, even though I could manually trigger it via keyboard tabbing.

Additionally, I was unable to set the focus state through Chrome DevTools by forcing focus on the DOM node of the ix-button or its encapsulated button element. Calling the focus method directly on these nodes also did not result in the expected focus behavior.

I suggest that all iX components should support a programmatic way to set focus.

Upon further investigation, I discovered that the native dialog HTML element, which the ix-modal component uses internally, automatically focuses the first focusable nested element. This is a built-in accessibility feature in browsers (see MDN for more details). I created a codepen to demonstrate this behavior.

However, this behavior is not present in the ix-modal component. I propose adding this default behavior to ensure better accessibility and consistency.

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.5.0

Code to produce this issue.

I’ve included a StackBlitz example to demonstrate that:

Elements cannot be focused programmatically.
The modal does not focus the first focusable nested element by default.

siemens / ix