TabContainer: Duplicate JAWS Announcements

[rjeela5]

Describe the bug

The TabContainer's tab panel element includes an aria-labelledby attribute that causes duplicate announcements for screen reader users. When a user selects a tab and enters its content panel, JAWS announces the tab label twice: once when the tab is selected, and again when entering the tab panel. This creates a redundant and poor screen reader user experience, as users hear the same information repeated unnecessarily.

Isolated Example

https://stackblitz.com/edit/github-ddtqnziq-7ctuldtp?file=src%2FApp.tsx

Reproduction steps

Test Environment & Instance:
DPPECWSMJPBGP/sfadmin/Welcome@22
Windows 11/Chrome latest/JAWS 2025
Steps:

1. Login to instance and go to the direct urls below:
   Navigate to https://qacand.qa.hr.cloud.sap/sf/wholeselfmanagement?isSkillGovernanceEnabled#/
2. Click Skills and then "Skill Governance" button at top right.
3. Skills Governance page is opened.
4. With JAWS ON, in VPC mode navigate within table and verify announcement for tablist panel.

Expected Behaviour

Actual Results:
Observe that, each tablist header is getting announced multiple times by screen reader.

Expected Result:
Ensure there is no repetitive announcement for tablist in VPC mode Repetitive announcements should be avoided as it can be a bad screen reader user experience. Hence each option should be announced only once

Screenshots or Videos

UI5 Web Components for React Version

v2.18.0, v2.21.3

UI5 Web Components Version

v2.18.1, v2.21.1

Browser

Chrome

Operating System

Windows

Additional Context

Reported bug id: https://jira.tools.sap/browse/WSM-33193

PR to fix the issue, but the shadow DOM changes might cause regression issues: https://github.wdf.sap.corp/xweb/ws-admin/pull/972

Relevant log output

Organization

SAP

Declaration

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

[Lukas742]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[IlianaB]

Hello @rjeela5 ,

This is implemented according to the ACC specifications:

• Tab Content: role=tabpanel, aria-labelledby=[ID_Tab] // backlabelling: The HTML element
surrounding the content of the currently selected tab should be linked to the text on the
corresponding tab.

Regards,
Iliana

[github-actions]

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

[rjeela5]

Hi @IlianaB

Thank you for the clarification on ACC specifications.

Issue We're Experiencing:
The aria-labelledby on tab panels causes JAWS to announce tab labels twice:

• Once when selecting the tab
• Again, when entering the tab panel content

JAWS Output:
Imported Skills (28) - Tab selected
tab panel start Imported Skills (28) ← Duplicate

Our Current Workaround:
We're removing aria-labelledby via Shadow DOM manipulation:
tabPanel.removeAttribute('aria-labelledby');

Problem with This Approach:

• Accessing Shadow DOM internals is fragile
• May break with future UI5 updates
• Not maintainable long-term

Request:
Could you please review whether the ACC specification aligns with actual screen reader behavior? The duplicate announcements create a poor user experience for visually impaired users.

Thank you!