ResponsivePopover: in mobile view the close button is missing a11y annotation and is left aligned if no header/headerText is set

[Lukas742]

Describe the bug
The close button of the ResponsivePopover in mobile view is positioned to the left if no header or headerText is set. Also the button is ignored by screen-readers, so it's hard for visually impaired people to exit the dialog.

To reproduce
Steps to reproduce the behavior:

1. Go to codesandbox
2. Use the dev tools to simulate a mobile device
3. Open popover and see that the close button is displayed on the left side
4. Focus the close button with a screen reader enabled --> only "Content" is read out - no information about the close button is given

Isolated example
https://codesandbox.io/s/ui5-webcomponents-forked-bwdmg?from-embed=&file=/index.html

Expected behavior
The close button should be read out by screen readers and it should always be positioned to the right.

Screenshots

Context

• UI5 Web Components version: 1.0.0-rc.14
• Screen reader used: https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn/related?hl=de

Edit: I just noticed that if a header (header or headerText) is used, the close button is not moved to the header section but is displayed below:

The screenshot was taken from the ResponsivePopover playground

[alexandar-mitsev]

Hello @Lukas742 ,

When testing with JAWS 2019 or NVDA screen readers the close button is read out correctly: "Decline button. To activate press space bar.". It contains the correct aria-label attribute. So it seems the problem is related to the particular screen reader you are using - we won't be able to assist further about it.

I will forward the ticket for processing about the position of the icon.

Regards,
Alexandar Mitsev

[alexandar-mitsev]

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

Please take a look at the reported problem with the position of the close button in the responsive popover on mobile.
The second problem about the screen reader is already answered.

Regards,
Alexandar Mitsev