Skip to content

Elements must only use permitted ARIA attributes in ui5-dynamic-page-title-focus-area #12466

@subhasisSap

Description

@subhasisSap

Describe the bug

In the UI5 framework, a span element is using the aria-labelledby attribute without a valid role. This causes accessibility violations because ARIA attributes must only be applied to elements that support them.

Isolated Example

No response

Reproduction steps

To Reproduce
1.Open any page using the ui5-dynamic-page-title component.
2.Inspect the span element with class ui5-dynamic-page-title-focus-area.
3.Observe the following HTML:

4.Run an accessibility check (e.g., axe or SAP UI5 Accessibility Checker).

Expected Behaviour

ARIA attributes like aria-labelledby should only be used on elements with a valid ARIA role. The span element should either:
Have an appropriate role attribute (role="region" or role="heading"), or

Image

Remove the aria-labelledby attribute if not needed.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.14.0

UI5 Web Components Version

2.14.0

Browser

Chrome

Operating System

windows

Additional Context

This issue can impact screen reader users because the aria-labelledby attribute is ineffective on a span without a valid role, leading to confusion or missed content.

Proposed solution
SAP UI5 should either:

Add a valid ARIA role to the span, or

Move the aria-labelledby attribute to a parent element that supports it.

Relevant log output

Organization

SAP

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Assignees

Labels

Type

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions