[FlexibleColumnLayout] [A11y]: Loss of focus in smaller screen when one column is visible

[Brahmansh]

Bug Description

At 320px width when only one column is visible, after clicking on a row when it opens another column there is no initial focus on that column. Focus was still on the previous column and user needs to press tab to get focus on the current column.

Affected Component

FlexibleColumnLayout

Expected Behaviour

In smaller screen size, when there is only one column visible there shouldn't be any loss of focus, and the first focusable element should be focused on the current visible column.

Isolated Example

No response

Steps to Reproduce

1. Issue can be reproduced on the basic sample with reduced screen size - https://sap.github.io/ui5-webcomponents/components/fiori/FlexibleColumnLayout/

Log Output, Stack Trace or Screenshots

https://github.com/user-attachments/assets/67657fef-934b-4fd2-bcee-2e69c13813f6

Priority

None

UI5 Web Components Version

2.11.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• [x] I’m not disclosing any internal or sensitive information.

[didip1000]

Hey @SAP/ui5-webcomponents-topic-p,

The issue is reproducible as described, can you take a look?

Best, Diana

[NakataCode]

Hello @Brahmansh,

I've been looking into this accessibility issue and would like to suggest handling the focus management at the application level rather than within the FCL component itself, as different applications might need different focus behavior depending on their use case.

I created a demo showing how this can be implemented. When transitioning from the first column to the second column, focus automatically moves to the first list item of the newly visible column.

Does this help solve your issue?

Best Regards, Nikola

[NakataCode]

Hello,

I’m closing the issue as this behavior is expected and is best handled at the application level to allow flexibility for different use cases. Focus management after layout transitions can vary depending on app needs, so managing it outside the component provides more control.

Feel free to reopen the issue if you have further concerns or need additional clarification.

Best Regards, Nikola

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!