[DatePicker/DateTimePicker/DateRangePicker]: [a11y] Calendar Popover should have accessibleName

[lormanlau1]

Describe the bug

The accessibleName is currently only applied to the input when using screen reader. Popover is reading the title of the page, needs a way to add accessible name to the calendar popover

Isolated Example

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

Reproduction steps

1. Open screenreader program (JAWS 2024)
2. Focus on the Input of the DatePickers
3. Hit F4 and observe that the screen reader is reading the title of the tab.

Expected Behaviour

We want a way to be able to modify the popover accessible name with a different label than the input itself. We expect it not to read the title of the tab.

Screenshots or Videos

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

No response

Additional Context

JAWS version 2024.2405.48

Relevant log output

No response

Organization

SAP SuccessFactors

Declaration

• [X] 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.

[unazko]

Hello @lormanlau1,

We already had an report about this issue: https://github.com/SAP/ui5-webcomponents/issues/9189 and the issue is fixed via the following PR: https://github.com/SAP/ui5-webcomponents/pull/8693

Best regards, Boyan