SAP / fundamental-ngx

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

[Accessibility: ACC-264.1] Button: UI name not read #12575

Open divyamalhotra488 opened 1 month ago

divyamalhotra488 commented 1 month ago

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Name of the UI should be read out to the user

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 versions.

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

Component used: VHD Access the component using screen reader, UI name is not read for ‘Clear/Remove’ button associated to ‘Selected Items and Conditions’ tokenizer text box.

image

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

You can try ngx examples, issue is reproducible there.

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

Yes, issue is raised by an accessibility expert.

Did you check the documentation and the API?

Yes

Did you search for similar issues?

Yes

Is there anything else we should know?

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.

droshev commented 1 month ago

@divyamalhotra488 The button is announced: Button clear selected items. What else do you expect here? @nikolay-kolarov do you think we are missing something?

Image

nikolay-kolarov commented 1 month ago

Hi @droshev,

The button is unlabelled and what you see is a description that is announced from the tooltip, after the button role. In such cases, we set the tooltip also as aria-label, as it will label the button as well. And then as it is the same, the screen reader ignores the tooltip and does not produce duplicated announcement. You can see this in the Remove All label/tooltip here: https://ui5.sap.com/#/entity/sap.ui.comp.valuehelpdialog.ValueHelpDialog/sample/sap.ui.comp.sample.valuehelpdialog.recommended image And on your side the aria-label is empty: image

Best Regards, Nikolay