[Popover]: Improve Accessibility of Popover Component for Screen Readers

[Dannysht]

Describe the bug

The current implementation of the Popover component is not accessible for screen reader users. Screen readers are unable to detect or read the content displayed inside the Popover, which results in a poor user experience for users relying on assistive technologies.

Note: Issue is only reproducible via JAWS. MacOS screen readers work properly

Isolated Example

https://stackblitz.com/edit/github-o8ow4gct?file=src%2FApp.tsx

Reproduction steps

...

Expected Behaviour

When the Popover is opened, screen readers should be notified and able to read its content in full.

The Popover content should be semantically structured and navigable (e.g., sections, headings, forms, lists).

Focus should be properly managed when the Popover opens and closes (e.g., focus is trapped inside while open and returns to the triggering element on close).

Appropriate ARIA roles and attributes should be used to convey the role and structure of the Popover content.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.8

UI5 Web Components Version

2.8

Browser

Chrome

Operating System

Windows

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

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

[hinzzx]

Hi @Dannysht ,

I've tried the application using JAWS on Chrome, Windows, and everything inside the Popover was read out for me.
Is there anything specific that is missing according to accessibility standards that are you implying for ?

What I did was:

1. Open the Popover by focusing it with Tab and pressing Enter;
2. Then navigating through the Popover using Arrow keys;
3. Everything in the Popover was read out for me;

2025-04-01_09-18-10.mp4

Best Regards,
Stoyan

[Dannysht]

It should be announced to the user that they can use the arrow keys to navigate through the content. On top of that, once the user enters the content area, it should also be clearly announced that they are now in this part of the dialog. Right now, this isn’t happening — screen readers just start reading everything at once without giving any separation or context. Another issue is that semantic elements like sections aren’t being picked up correctly. They're not being announced at all, which makes it hard to understand the structure of the content. All the information is just dumped in one go, instead of being read in meaningful chunks. This needs to be fixed so screen readers can properly announce each section and give users clear feedback when navigating through different parts of the dialog.

Fix Summary
Announce that arrow keys can be used to navigate content.
Announce when focus enters the content area.
Ensure semantic elements like <section>, <header>, <nav>, etc., are announced properly by screen readers and context is preserved.
Ensure screen readers do not read the entire dialog content at once.

If you have any further questions please contact Nevena Kirova as she is the one to find the bug but was unable to create the issue.