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

[ragul0205]

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>