search

SAP / fundamental-ngx

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

[Sourcing-2][Accessibility: ACC-264.1][WIP] Radio Button: Label and group label not read. #11281

Closed JyotiKumari1507 closed 1 month ago

JyotiKumari1507 commented 9 months ago

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Component having issue:https://sap.github.io/fundamental-ngx/#/core/radio radio button: The radio buttons should always be associated to its individual and group label.

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 any Radio Button. Radio buttons will not be associated to its label both label and also its group label header by screen reader

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?

droshev commented 9 months ago

@JyotiKumari1507 Can you provide more specific input here, what scenario are you trying to achieve and what can't you set via HTML and API?

JyotiKumari1507 commented 9 months ago

@droshev The radio buttons should always be associated to its individual and group label. Screen reader isn't able to read out radio button with its both value and its label. We can have more discussion on this in next call

droshev commented 9 months ago

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

JyotiKumari1507 commented 9 months ago

@droshev attaching screenshot for more details where Screen reader isn't able to read out radio button with its both value and its label.:

image image
droshev commented 8 months ago

Most of the fields are not filled.

JyotiKumari1507 commented 7 months ago

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

droshev commented 7 months ago

@nikolay-kolarov @InnaAtanasova do we have to set something, or the application dev can set it?

nikolay-kolarov commented 7 months ago

Hi @droshev,

In UI5 it is a task for the application to relate the two elements: If a label is used, it can be done via the labelFor API of the Label which adds aria-labelledby on the radiogroup element: https://ui5.sap.com/#/entity/sap.m.RadioButtonGroup/sample/sap.m.sample.RadioButtonGroup/code If another element is used the RadioButtonGroup has ariaLabelledBy API which can be used.

Best Regards, Nikolay

droshev commented 7 months ago

we need to add 2 attributes on the group level: role and aria-labelledby. The latter points to a label

Image