Tree: Down arrow throws error if tabindex set with pass-through

[jacobtylerwalls]

Describe the bug

With a <Tree> component that sets tabindex on the content via pass-through, pressing down arrow can raise TypeError:

chunk-ESTIRR4N.js?v=e9807d5b:1713 Uncaught TypeError: Cannot set properties of undefined (setting 'tabIndex')
    at Proxy.focusRowChange (chunk-43QCWTX6.js?v=e9807d5b:522:34)
    at Proxy.onArrowDown (chunk-43QCWTX6.js?v=e9807d5b:435:14)
    at Proxy.onKeyDown (chunk-43QCWTX6.js?v=e9807d5b:413:16)
    at mergeProps.onKeydown._cache.<computed>._cache.<computed> (chunk-43QCWTX6.js?v=e9807d5b:711:55)
    at callWithErrorHandling (chunk-ESTIRR4N.js?v=e9807d5b:1650:18)
    at callWithAsyncErrorHandling (chunk-ESTIRR4N.js?v=e9807d5b:1658:17)
    at HTMLLIElement.invoker (chunk-ESTIRR4N.js?v=e9807d5b:10247:5)

Motivation

Without setting taborder via :pt, I found that children without children of their own are not present in the tab order. If those children contain tabbable elements like <a> tags, this appears to leave a jagged tab order.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-issue-template-qto7ki?file=src%2FApp.vue

PrimeVue version

3.50.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Click to expand parent
2. TAB to child
3. SHIFT-TAB to parent
4. Down arrow

Expected behavior

No TypeError

[tugcekucukoglu]

We suggest checking the accessibility section of Tree component.
Tab key behavior: Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the page tab sequence.

Changing the tabindex of an inner element breaks all component behavior and keyboard support will not work as expected. We could suggest not changing the tabindex or creating your own Tree component in this case.