[a11y | SelectDialog]: headerText is not read by VoiceOver

[volha-arkhipenka-sap]

Bug Description

With Voiceover enabled, on opening SelectDialog the title provided in headerText is not read by VoiceOver.

Affected Component

SelectDialog https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/modals-popovers-selectdialog--docs

Expected Behaviour

All SelectDialog content and information should be conveyed to a user.

Isolated Example

Reproducible with VoiceOver enabled on https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/modals-popovers-selectdialog--docs

Steps to Reproduce

1. Provide headerText prop to SelectDialog component
2. Enable VoiceOver
3. Open SelectDialog component
4. headerText is not announced

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

2.9.0

Browser

Chrome

Operating System

macOS Sequoia 15.4.1

Additional Context

No response

Organization

No response

Declaration

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

[AlekseiSch]

Also reproducible for NVDA

[NakataCode]

Hi @volha-arkhipenka-sap,

I tested the <ui5-dialog> component directly using the Playground with header-text provided, and observed that VoiceOver does read the header, as long as the initial focus is placed on it. You can check the test example here.

According to the spec, the dialog header should be announced on focus, so the behavior depends on where the focus lands upon dialog open. In your example, the initial focus is set on the first item inside the dialog, not on the header, which likely explains why VoiceOver doesn’t announce it.

I’m going to proceed with closing this ticket for now. If any further questions arise or you need clarification, feel free to reopen it.

Best regards,
Nikola

[github-actions]

This issue has been closed. To reopen, just leave a comment!

[github-actions]

This issue has been closed. To reopen, just leave a comment!

[volha-arkhipenka-sap]

Hi @NakataCode, thank you for the response.

However, when SelectDialog contains ListItemStandards, the focus is set on the first item automatically by SelectDialog. This focus behavoir seems to be default and internal for SelectDialog component when it has a list of ListItemStandards inside. The focus lands on the first ListItemStandard even in the example from the documentation https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/modals-popovers-selectdialog--docs.

Should it be considered as a bug of incorrect focus landing on SelectDialog open?

[NakataCode]

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

Could you please take over this issue?

Best regards,
Nikola

[LidiyaGeorgieva]

Hello @Lukas742,

It looks that this should be fixed in the Select Dialog, where slot "header" is used, but "accessibleName" is not provided.
See the documentation of the DIalog: https://sap.github.io/ui5-webcomponents/nightly/components/Dialog/#header

Best Regards,
Lidiya

[LidiyaGeorgieva]

@volha-arkhipenka-sap for issues related with the ui5-webcomponents-react project you should open GitHub issues on this project (not on ui5-webcomponents project)

[Lukas742]

Hi @LidiyaGeorgieva

thanks for letting me know! I'll move this issue to our repo.

---

Hi @volha-arkhipenka-sap

until an accessible name is available out of the box, you can set it yourself via the accessibleName prop.

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.11.0-rc.0 🎉

The release is available on v2.11.0-rc.0

Your semantic-release bot 📦🚀

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.10.1 🎉

The release is available on v2.10.1

Your semantic-release bot 📦🚀