Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Sourcing-2][Accessibility: ACC-264.1] Role = Tree should not contain multiple UI elements. #11279

Open
JyotiKumari1507 opened this issue Jan 21, 2024 · 1 comment · May be fixed by #12621
Open
Assignees
Labels
accessibility use this label for any issue or enhancement related to screenreader/keyboard/etc support

Comments

@JyotiKumari1507
Copy link

JyotiKumari1507 commented Jan 21, 2024

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Component having issue: https://sap.github.io/fundamental-ngx/#/core/breadcrumb
Below code found by Access assistant tool for breadcrumb
This FD-BREADCRUMB with a role attribute value of 'tree' should not contain input elements (without an assigned ARIA role), button elements (without an assigned ARIA role), text area elements (without an assigned ARIA role), select elements (without an assigned ARIA role) or A elements (without an assigned ARIA role).

Code Snippet:

Shared Keys
adb9ddf1-602f-45a8-aeeb-8914b88a801d

One way to avoid inappropriate nesting of elements is to ensure that page source validates to a formal grammar by running it through an HTML validator. Developers should remove nested elements that should not be nested. This may take the form of removing one of the two elements and ensuring the remaining element provides the proper textual equivalent. If the two active elements perform different actions, the elements should be 'adjacent' to each other in the markup, rather than being nested, and the specific action of each element should be identified. Similar issues may occur when links and other content are embedded in form labels.

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;

• Download Access assistant tool from level access.
• For registered AMP user, login with your SAP email ID into SAP AMP instance: sap.levelaccess.net
Use any breadcrumb sample code
This FD-BREADCRUMB with a role attribute value of 'tree' will contain input elements (without an assigned ARIA role), button elements (without an assigned ARIA role), text area elements (without an assigned ARIA role), select elements (without an assigned ARIA role) or A elements (without an assigned ARIA role).

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 droshev added the accessibility use this label for any issue or enhancement related to screenreader/keyboard/etc support label Jan 30, 2024
@droshev droshev changed the title [Accessibility: ACC-264.1] Role = Tree should not contain multiple UI elements. [Sourcing-2][Accessibility: ACC-264.1] Role = Tree should not contain multiple UI elements. Jan 31, 2024
@nikolay-kolarov
Copy link

Hi @droshev,

The recommended implementation for breadcrumbs from the acc team is ol -> li -> a.
I am not sure why you decided to use a tree role, but you can change it to a list.
You can follow the implementation in UI5 as a reference: https://ui5.sap.com/resources/sap/ui/documentation/sdk/index.html?sap-ui-xx-sample-id=sap.m.sample.Breadcrumbs&sap-ui-xx-sample-lib=sap.m&sap-ui-xx-sample-origin=.&sap-ui-xx-dk-origin=https%3A%2F%2Fui5.sap.com&sap-ui-theme=sap_horizon_dark&sap-ui-rtl=false&sap-ui-density=sapUiSizeCozy

Best Regards,
Nikolay

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility use this label for any issue or enhancement related to screenreader/keyboard/etc support
Projects
None yet
4 participants