Incorrect tabpanel ID in Tab Component #7431
Labels
Type: Bug
Issue contains a bug related to a specific component. Something about the component is not working
Milestone
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
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
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>
The text was updated successfully, but these errors were encountered: