FlexibleColumnLayout: Opening of the column layout is not announced

[pppwr7]

Describe the bug

Hi Colleagus, As a part of accessibility testing, we received an issue that whenever a new column in the layout is made visible or hidden, the user is not announced regarding the same.

Isolated Example

https://sap.github.io/ui5-webcomponents-react/?path=/story/layouts-floorplans-flexiblecolumnlayout--with-different-columns

Reproduction steps

1. go to https://sap.github.io/ui5-webcomponents-react/?path=/story/layouts-floorplans-flexiblecolumnlayout--with-different-columns
2. click on any row in the table
3. New column of the layout is made visible but it is not announced.

Expected Behaviour

User should be made aware of the changes in the UI

Screenshots or Videos

No response

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Lukas742]

Hi @pppwr7

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

---

Hi colleagues, the described behavior can also be observed in your example: https://sap.github.io/ui5-webcomponents/components/fiori/FlexibleColumnLayout/

[niyap]

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

Could you please check whether it is expected to have additional announcement when a new column is presented?

Thank you in advance!

Kind Regards, Niya

[pppwr7]

Hi Colleagues, could you please let me know if there are any updates on this issue? Will it be taken up as feature request?

[dobrinyonkov]

Hi @pppwr7,

We recommend implementing this at the application level using the layout-change event of the flexible column layout in combination with the InvisibleMessage service. More details can be found here: Invisible Messaging Documentation.

Here’s an example to illustrate:

<ui5-flexible-column-layout>
    ...
</ui5-flexible-column-layout>

import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";

const fcl = document.querySelector("ui5-flexible-column-layout");
fcl.addEventListener("layout-change", (event) => {
  announce(`A layout was changed changed`);
});

You can also customize the announcement based on your page context. Let us know if this works or if you encounter any issues.

Kind Regards, Dobrin

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[dobrinyonkov]

Closing this incident duo to inactivity. Please let us know if you have other questions.