From 790126cee079ad9facb72a7ad30487fc0820c0e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 15 May 2023 10:33:58 +0300
Subject: [PATCH] Fixed #3910 - TabMenu: Accessibility issue in TabMenu with
 hidden tabs

---
 components/lib/tabmenu/TabMenu.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index 5778ad8e5..f3413bb75 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="p-tabmenu p-component" v-bind="ptm('root')">
         <ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
-            <template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
+            <template v-for="(item, i) of focusableItems" :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="getPTOptions('menuitem', i)">
                         <template v-if="!$slots.item">
@@ -15,7 +15,7 @@
                                 :aria-disabled="disabled(item)"
                                 :tabindex="isExactActive ? '0' : '-1'"
                                 @click="onItemClick($event, item, i, navigate)"
-                                @keydown="onKeydownItem($event, item, i, navigate)"
+                                @keydown="onKeydownItem($event, i, navigate)"
                                 v-bind="getPTOptions('action', i)"
                             >
                                 <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
@@ -26,7 +26,7 @@
                         <component v-else :is="$slots.item" :item="item" :index="i"></component>
                     </li>
                 </router-link>
-                <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)" v-bind="getPTOptions('menuitem', i)">
+                <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, i)" v-bind="getPTOptions('menuitem', i)">
                     <template v-if="!$slots.item">
                         <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
                             <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
@@ -132,7 +132,7 @@ export default {
                 index: index
             });
         },
-        onKeydownItem(event, item, index) {
+        onKeydownItem(event, index) {
             let i = index;
 
             let foundElement = {};
@@ -282,6 +282,15 @@ export default {
             }
         }
     },
+    computed: {
+        focusableItems() {
+            return (this.model || []).reduce((result, item) => {
+                this.visible(item) && !DomHandler.hasClass(item, 'p-disabled') && result.push(item);
+
+                return result;
+            }, []);
+        }
+    },
     directives: {
         ripple: Ripple
     }