Skip to content

[SideNavigationGroup]: Element has an aria attribute which is not valid #11349

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

Closed
1 task done
AlekseiSch opened this issue Apr 16, 2025 · 3 comments · Fixed by #11357
Closed
1 task done

[SideNavigationGroup]: Element has an aria attribute which is not valid #11349

AlekseiSch opened this issue Apr 16, 2025 · 3 comments · Fixed by #11357
Assignees
Labels
ACC bug This issue is a bug in the code released TOPIC RD

Comments

@AlekseiSch
Copy link

Bug Description

The provided HTML structure includes a <div> element that uses the attribute aria-description, which is currently not valid in the ARIA 1.1 or 1.2 specifications, as it is still under consideration in the ARIA 1.3 Editor's Draft. Using attributes that are not yet standardized can lead to compatibility issues with assistive technologies like screen readers.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description

Affected Component

SideNavigationGroup

Expected Behaviour

Developers are expected to use valid and standardized ARIA attributes in their markup to ensure compatibility with the widest range of assistive technologies.

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/layouts-floorplans-sidenavigation--grouped

Steps to Reproduce

  1. Install Access Assistant extension
  2. Open example page https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/layouts-floorplans-sidenavigation--grouped
  3. Open Access Assistant and press Quick test
  4. Use Node selector button to select side navigation, then select <ui5-side-navigation> element and press run
  5. Review the results of the quick test. Observe the highlighted issue "Ensure ARIA roles, states, and properties are valid"

Log Output, Stack Trace or Screenshots

Image

Image

Priority

None

UI5 Web Components Version

SideNavigationGroup

Browser

Chrome

Operating System

Windows

Additional Context

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
@AlekseiSch AlekseiSch added the bug This issue is a bug in the code label Apr 16, 2025
@Valkanister
Copy link

"Hello @SAP/ui5-webcomponents-topic-rd ,
Please have a look if the usage of aria-description is a problem for the Side Navigation. The issue with the invalid IDs I think comes from the fact that not the entire DOM was scanned. It does not happen if the whole body is inspected.

Kind regards, 

Georgi

SAP Development Support

@s-todorova s-todorova self-assigned this Apr 16, 2025
s-todorova added a commit that referenced this issue Apr 17, 2025
- Remove invalid 'aria-description' for group element with role='treeitem'
- Add missing 'aria-label' for group element with role='group'

Fixes: #11349
s-todorova added a commit that referenced this issue Apr 28, 2025
- Remove invalid 'aria-description' for group element with role='treeitem'

Fixes: #11349
@github-project-automation github-project-automation bot moved this from New Issues to Completed in Maintenance - Topic RD Apr 28, 2025
Copy link

This issue has been closed. To reopen, just leave a comment!

@ui5-webcomponents-bot
Copy link
Collaborator

🎉 This issue has been resolved in version v2.10.0-rc.3 🎉

The release is available on v2.10.0-rc.3

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ACC bug This issue is a bug in the code released TOPIC RD
Projects
Status: Completed
Development

Successfully merging a pull request may close this issue.

4 participants