[a11y | Select]: "Select" header is not announced on mobile view

[volha-arkhipenka-sap]

Bug Description

On mobile view, Select component has a "Select" heading. It's not read by a screen reader when Select is opened.

Affected Component

Select https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/inputs-select--default

Expected Behaviour

When Select is open on mobile, all content including the header is announced.

Isolated Example

Reproducible with Talkback / VoiceOver on https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/modals-popovers-selectdialog--default&args=accessibleName:Test+a11y+name

Steps to Reproduce

1. Enable Talkback or VoiceOver
2. Open mobile version of Select
3. "Select" title from the heading is not announced

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

2.9.0

Browser

Chrome

Operating System

macOS

Additional Context

The issue is also reproducible for:

Operating System: Android 14
Screen Reader: Talkback Version 15.5
Browser: Chrome

Organization

No response

Declaration

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

[stephania87]

@SAP/ui5-webcomponents-topic-rd
ui5-select on mobile device renders a fullscreen ui5-responsive-popover, where the dialog and title are not announced with the first focused element (JAWS with mobile simulation on desktop, VoiceOver on iOS device and TalkBack on Android device)
https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/inputs-select--default

[ArtemJJS]

Are there any updates?

[s-todorova]

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

When the ResponsivePopover is used with a slotted custom header, the automatic labelling that usually comes from the headerText property is lost. In the case for mobile, where a dialog is opened, the labelling of the dialog is no longer handled automatically by us and accessibleName should be used.
In your template for the SelectPopover I see that the header text is achieved using a slot, but no accessible-name-ref is provided to the ResponsivePopover that would map the span you render as a title.

You can see here an example of a similar structure of what you use in the Select's template, with the ref set - the text is read out correctly.

Could you please take over?

Best,
Siyana