ExpandableText: Accessibility - "Show More" & popover content not read by screenreader, when used in Analytical tab inside a dialog

[abhijeet181088]

Describe the bug

We are using ExpandableText component in a column in AnalyticalTable, which is in a dialog. There are following accessibility issues.

1. "Show More" link is not read when focus goes to the link, instead screenreader reads "Close the popover" text
2. Popover's content is not read

Isolated Example

https://stackblitz.com/edit/github-lg4jzd-cj6vlc

Reproduction steps

1. Go to the stackblitz link provided
2. Click on "Open Dialog" button, dialog opens
3. Click on "Tab" to reach the first row's "Show More" button
4. Screenreader reads "Close the popover", which seems incorrect
5. Popover opens, but it's content is not read.

Expected Behaviour

"Show More" / "Show Less" links should be read correctly when in focus.
Content of the popover should be read

Screenshots or Videos

No response

UI5 Web Components for React Version

1.28.1

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

macOS

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Lukas742]

Hi @abhijeet181088

This PR will fix the first issue. Regarding the second one we'll need more time to investigate. We'll let you know once there's an update.

[Lukas742]

Hi @abhijeet181088

sorry for the late reply. It turns out that the 2nd issue you reported is caused due to event propagation. You can find out more about this here: https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/data-display-analyticaltable-recipes--docs

When calling event.stopPropagation in the focus event of the ExpandableText, the content of the popover is read out by screen readers.
StackBlitz example: https://stackblitz.com/edit/github-lg4jzd-9shgrv?file=src%2FApp.tsx

Also, in our v2, this should be working out of the box due to the Popover API.
StackBlitz example: https://stackblitz.com/edit/github-lg4jzd-ba2bpg?file=src%2FApp.tsx

In case there are additional questions, please feel free to reach out.