Tabview : Accessibility - ARIA property 'aria-controls' value is not valid The ARIA property must reference a non-empty unique id of an existing element that is visible

Describe the bug

Accessibility Violation

The 'id' "pr_id_441_content" specified for the ARIA property 'aria-controls' value is not valid
The ARIA property must reference a non-empty unique id of an existing element that is visible

Why is this important?
Any element that uses an ARIA property must reference a valid id attribute. This enables assistive technologies to precisely identify the referenced element.

Element location

<a
    data-pc-section="headeraction"
    aria-disabled="false"
    aria-selected="false"
    aria-controls="pr_id_441_content"
    tabindex="-1"
    class="p-tabview-nav-link"
    role="tab"
    id="pr_id_44_header_1">

What to do
Update the ARIA property value with the unique id value of a valid visible element.

For example:

<form action="" method="post">
      <label for="ln1">Last Name</label>
      <input type="text" name="lastname" id="ln1" value="enter last name" title="enter last name" aria-describedby="ln2">
</form>
<div id="ln2" role="tooltip">Last Name must be alpha only characters</div>

Rule ID: aria_id_unique
Reason ID: Fail_1

Reproducer

No response

System Information

Can be reproduced in every environment using IMB Accessibility checker

Steps to reproduce the behavior

1. Create a Tabview with more than 1 TabPanel.
2. Run IMB Accessibility checker
3. Check Violations

Expected behavior

Every Tab link must have corresponding Tab Content available in DOM.

Example below.

<div id="pr_id_441_content" role="tabpanel" aria-labelledby="pr_id_44_header_1" >
</div>

Start with the Tabview and TabPanel component entry points, then reproduce the issue with more than one TabPanel and run the IBM Accessibility checker. Trace the generated tab and panel IDs, and verify that each aria-controls value references a unique visible tab panel whose aria-labelledby points back to the tab.