[Sourcing-2][Accessibility: ACC-264.1][WIP] Icon: Toggle read twice.

JyotiKumari1507 commented 7 months ago

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Component having issue:https://sap.github.io/fundamental-ngx/#/core/datetime-picker Datetime Picker: When user access the icon 'Display calendar toggle' , the word toggle is mentioned twice. The word toggle should not be read and UI should for the icon should be changed to button.

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 version

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

Using Screen reader can check by implementing similar case. Just use Datetime picker and access the icon 'Display calendar toggle' , the word toggle is mentioned twice.

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

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?

Please refer attachement:

ACC-264.1.docx

droshev commented 7 months ago

@JyotiKumari1507 Can you share the steps and the history from JAWS?

JyotiKumari1507 commented 7 months ago

@droshev For Datetime-picker , we have icon 'sap-icon--date-time' on which click calendar pop open. This icon is read out by screen reader while Accessibility team testing as 'toggle toggle' button which isn't expected. We can have more discussion in next call

droshev commented 7 months ago

@JyotiKumari1507 we need the input written so it will be easier to process

JyotiKumari1507 commented 7 months ago

@droshev Attaching screen reader screenshot for more details:

droshev commented 6 months ago

Most of the fields are not filled.

JyotiKumari1507 commented 5 months ago

@droshev please let us know what fields are pending to fill from our side

droshev commented 5 months ago

@nikolay-kolarov Can you advise us what to do? Thanks

nikolay-kolarov commented 5 months ago

Hi @droshev,

The double announcement comes, as the toggle is contained in the tooltip. There are several things:

We have a guidance from UX that no tooltips shall be used on those buttons. So, you need to remove the tooltip.
Those buttons cannot be focused or activated with the keyboard and are exclusively for mouse users (for keyboard there is a defined shortcut F4). So if the shortcut is implemented, you can hide the buttons from the screen reader.

You can have a look at the UI5 implementation as a reference: https://ui5.sap.com/#/entity/sap.m.DateTimePicker/sample/sap.m.sample.DateTimePicker

Best Regards, Nikolay

SAP / fundamental-ngx