[SF][Dialog][A11y]: The content is announced twice by screen reader (0.31.x)

[ericchan1983]

Describe the bug When adding the aria-label for the message box, the aria-label is announced twice.

Isolated Example

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior The aria-label is only announced once by the screen reader.

Screenshots

UI5 Web Components for React Information @ui5/webcomponents version:0.31.15 @ui5/webcomponents-react version: 0.131.15 Operating System: macOS BigSur Browser: Version 92.0.4515.159 (Official Build) (x86_64)

Additional context Add any other context about the problem here.

[Lukas742]

Hi @ericchan1983

this behavior is only occuring with the UI5 Web Components for React 0.131.x version (which is on the same stage as the 0.31.x version of the UI5 Web Components), if possible, please always check if the issue also exists with the main version, so we don't have to do it ourself.

Since the root cause of this issue is the Dialog I changed the title of this issue accordingly and I'm going to transfer it to the UI5 Web Components repo, so our colleagues can take a look at it.

Example with plain Web Components:

• 0.31.16 (codeSandbox)

• 1.0.0-rc.15 (codeSandbox)

[sfsf-xweb-sh]

Hi @Lukas742 I am from SuccessFactors Web Experience Shanghai team.

Our team is only allowed to use the SF version of ui5-webcomponent. We can not use rc version of ui5-webcomponent.

If this issue is fixed in 1.0.0-rc.15. Can you please downport this feature to 0.31.x ? ( The current version is 0.31.16, maybe you can release 0.31.17 )

[Lukas742]

Hi @sfsf-xweb-sh

I'm part of the UI5 Web Components for React team, so I'm not responsible for releasing versions of the UI5 Web Components. That's why I transferred this issue and added a comment explaining what probably the root cause is here.

[TeodorTaushanov]

Hi @ericchan1983,

Can you provide us an example of your ui5-dialog, where the issue is reproducible?

You can edit: https://codesandbox.io/s/ui5-webcomponents-forked-xtrox?file=/index.html:300-317

Best, Teo

[ericchan1983]

Hi @TeodorTaushanov,

https://codesandbox.io/s/ui5-webcomponents-forked-xtrox?file=/index.html:300-317

In the example you provided, there are two aria-labels for the UI5-dialog.

Regards, Eric Chen

[ericchan1983]

Hi @TeodorTaushanov，

The PopOver has the same issue which screen reader announced the aira-label twice. Could you also have a look at it, please?

Regards, Eric Chen

[ilhan007]

Hello @ericchan1983 we have merged a fix for the Dialog, that will be released with the next patch - in few days.

Can you please open a separate issue for the Popover with reproducible example and details.

Thanks!

[ilhan007]

Resolved with 0.31.20