SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
263 stars 126 forks source link

[Sourcing-2][Accessibility: ACC-253.3] Labels: All data input/data output elements and grouped elements (e.g. tables) have to be labeled clearly and accurately #12071

Open divyamalhotra488 opened 2 months ago

divyamalhotra488 commented 2 months ago

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

All grouped information labeled should be visible, clearly and accurately

Can you handle that on the application side

No

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

All latest versions.

If this is a bug, please provide steps for reproducing it; the exact components you are using;

DatetimePickerModule, DatePickerModule

Please provide relevant source code (if applicable).

Refer ngx examples: https://sap.github.io/fundamental-ngx/#/core/date-picker https://sap.github.io/fundamental-ngx/#/core/datetime-picker

Please provide stackblitz example(s).

Refer ngx examples.

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Yes we have got this bug from Accessibility expert only.

Did you check the documentation and the API?

Yes

Did you search for similar issues?

Is there anything else we should know?

There is a config option to provide header for mobile mode in date picker modules but that doesn't work for desktop mode. Header should be provided for date picker as per accessibility standards.

IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.

InnaAtanasova commented 2 months ago

hello @divyamalhotra488 Thank you for creating the issue. Could you please provide more information regarding this issue? For a specific example from the Date picker, what exactly is the problem and what is the expected output. Would also be helpful if you could provide the a11y report from the experts that evaluated the examples. Thank you!

divyamalhotra488 commented 2 months ago

Hi @InnaAtanasova, as you can see in the below screenshot, there is no visible dialog header provided for 'Calendar' dialog.

Expectation from accessibility expert: Visible and meaningful title should be provided for all the dialogs. Meaningful and visible titles supports the user in accessing data correctly in the page.

image
droshev commented 2 months ago

@divyamalhotra488 in that case(from the tiny screenshot) the date time picker is a popover. the dialog is the schedule job one.