[MultiInput]: A11Y - Focus cycles through background elements with open value help dialog

[fushizen]

Describe the bug

This behavior occurs on Microsoft Edge, Chrome, and Firefox, however, it is easier to trigger on MS Edge as on pressing F4, the focus automatically moves out of the page to the browser's address bar (attached video), leading to accessibility issues.

In MS Edge -
On pressing F4 to open/trigger a value help dialog for the MultiInput component, the focus moves to the browser's address bar. Then on pressing tab, the focus does not move back to the dialog on navigation, it cycles through the background elements first, not the open dialog.

In Firefox and Chrome -
Manually moving the focus out of the page and then using tab to navigate reproduces the same issue.

Isolated Example

https://stackblitz.com/edit/kqob4ac6?file=src%2FApp.tsx

Reproduction steps

1. Go to the stackblitz
2. For MS Edge - and focus on the MultiInput component and press F4
3. Dialog opens and focus moves to the browser window.
4. For other browsers, manually move focus out of the window.
5. Pressing tab moves focus to background elements first even though dialog is still open

Expected Behaviour

Background elements should not be accessible if a dialog is open

Screenshots or Videos

dialog-focus-background-issue.mp4

UI5 Web Components for React Version

~2.4.0

UI5 Web Components Version

~2.4.0

Browser

Edge, Chrome, Firefox

Operating System

Windows

Additional Context

No response

Relevant log output

Organization

SAP

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.

[kgogov]

Hi @fushizen,

Thanks for the detailed report!

I tried to reproduce this on the latest @ui5/webcomponents (2.24.0) using both your StackBlitz and a plain-JS version I put together: https://stackblitz.com/edit/vite-ckjqs6a7

On Chrome/Edge/macOS, Tab consistently kept focus inside the dialog — I couldn't reproduce the escape. Your repo is pinned to ~2.4.0 (Nov 2024), so it may already be fixed on latest.

Could you try updating @ui5/webcomponents / @ui5/webcomponents-react to the latest and see if you can still reproduce?

Thanks!
Konstantin