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] Radio button: State and association not provided #11274

Closed JyotiKumari1507 closed 3 weeks 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/#/platform/table/basic Table with Sort and Group: The radio buttons within the dialog 'sort' are not associated to its group header 'Sort order/Sort by' and UI type as radio button not mention and also the status 'Selected/not selected' is also not conveyed.

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 table with sort and group on toolbar. click sort/group icon .to open there respective dialog popup. The radio buttons within the dialog 'sort' are not associated to its group header 'Sort order/Sort by' and UI type as radio button not mention and also the status 'Selected/not selected' is also not conveyed.

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?

nikolay-kolarov commented 9 months ago

Hi @droshev,

This is about this dialog: image

The elements with role listbox need to be labelled in order to give the semantic what is selected. You can reuse the solution in UI5: https://ui5.sap.com/#/entity/sap.m.Table/sample/sap.m.sample.TableViewSettingsDialog The listbox are labelled with an invisible text: image The selected state is given by a custom text added on aria-labelledby on focus, as listitem does not support aria-selected: https://www.w3.org/TR/wai-aria-1.2/#listitem

Best Regards, Nikolay

mikerodonnell89 commented 3 weeks ago

Fixed as part of #12525