Incorrect tabpanel ID in Tab Component

[daniel-hitchins]

Describe the bug

The tabpanel in the Tab component has an incorrect id. Instead of the expected format (e.g., pv_id_1_36_tabpanel_0), it is being rendered as undefined_tabpanel_0. This causes an accessibility issue because the corresponding tab button has an aria-controls attribute that references the correct ID (aria-controls="pv_id_1_36_tabpanel_0"), resulting in a mismatch.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-fmqqvzwa?file=src%2FApp.vue

Environment

Library/Framework Version: Storybook 8.1.11
Browser: Chrome 134.0.6998.36
Operating System: Windows 11

Vue version

3.4.31

PrimeVue version

4.3.0

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

1. Render the Tab component in the application.
2. Inspect the generated HTML for the tabpanel and tab button elements.
3. Notice that the tabpanel has an id="undefined_tabpanel_0" while the tab button has aria-controls="pv_id_1_36_tabpanel_0".

Expected behavior

The tabpanel should have the correct id, matching the expected format so that the aria-controls attribute on the tab button correctly references it.

<!-- Current incorrect output -->
<div id="undefined_tabpanel_0" role="tabpanel"></div>
<button aria-controls="pv_id_1_36_tabpanel_0">Tab 1</button>

<!-- Expected correct output -->
<div id="pv_id_1_36_tabpanel_0" role="tabpanel"></div>
<button aria-controls="pv_id_1_36_tabpanel_0">Tab 1</button>