TabMenu: Accessibility issue in TabMenu with hidden tabs

[hstupkova]

Describe the bug

You can't navigate between tabs with keyboard right and left arrow keys if there are tabs that have visible: false.

The problem is that findNextItem method receives an array of tabs that does not include hidden tabs (this.$refs.tab), but the index of the current tab is taken from an array of all tabs including the hidden ones (@keydown receives i from model).

<template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
                <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                    <li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation" v-bind="ptm('menuitem')">
                        <template v-if="!$slots.item">
                            <a
                                ref="tabLink"
                                v-ripple
                                role="menuitem"
                                :href="href"
                                class="p-menuitem-link"
                                :aria-label="label(item)"
                                :aria-disabled="disabled(item)"
                                :tabindex="isExactActive ? '0' : '-1'"
                                @click="onItemClick($event, item, i, navigate)"
                                @keydown="onKeydownItem($event, item, i, navigate)"
                                v-bind="ptm('action')"
                            >

Reproducer

https://codesandbox.io/s/goofy-bell-vjc077

PrimeVue version

3.27.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Tabs should be accessible with keyboard even if there are hidden tabs in the model.