primevue 3.16.2 → 3.18.0

package/steps/steps.esm.js

@@ -1,4 +1,4 @@
-import { UniqueComponentId } from 'primevue/utils';
+import { UniqueComponentId, DomHandler } from 'primevue/utils';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, createBlock, withCtx, toDisplayString, resolveDynamicComponent, createCommentVNode } from 'vue';
 
 var script = {
@@ -8,7 +8,7 @@ var script = {
             type: String,
             default: UniqueComponentId()
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -21,10 +21,16 @@ var script = {
             default: true
         }
     },
+    mounted() {
+        const firstItem = this.findFirstItem();
+
+        firstItem.tabIndex = '0';
+    },
     methods: {
         onItemClick(event, item, navigate) {
             if (this.disabled(item) || this.readonly) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -39,58 +45,152 @@ var script = {
                 navigate(event);
             }
         },
+        onItemKeydown(event, item, navigate) {
+            switch (event.code) {
+                case 'ArrowRight': {
+                    this.navigateToNextItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    this.navigateToPrevItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Home': {
+                    this.navigateToFirstItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    this.navigateToLastItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab':
+                    //no op
+                    break;
+
+                case 'Enter':
+
+                case 'Space': {
+                    this.onItemClick(event, item, navigate);
+                    event.preventDefault();
+                    break;
+                }
+            }
+        },
+        navigateToNextItem(target) {
+            const nextItem = this.findNextItem(target);
+
+            nextItem && this.setFocusToMenuitem(target, nextItem);
+        },
+        navigateToPrevItem(target) {
+            const prevItem = this.findPrevItem(target);
+
+            prevItem && this.setFocusToMenuitem(target, prevItem);
+        },
+        navigateToFirstItem(target) {
+            const firstItem = this.findFirstItem(target);
+
+            firstItem && this.setFocusToMenuitem(target, firstItem);
+        },
+        navigateToLastItem(target) {
+            const lastItem = this.findLastItem(target);
+
+            lastItem && this.setFocusToMenuitem(target, lastItem);
+        },
+        findNextItem(item) {
+            const nextItem = item.parentElement.nextElementSibling;
+
+            return nextItem ? nextItem.children[0] : null;
+        },
+        findPrevItem(item) {
+            const prevItem = item.parentElement.previousElementSibling;
+
+            return prevItem ? prevItem.children[0] : null;
+        },
+        findFirstItem() {
+            const firstSibling = DomHandler.findSingle(this.$refs.list, '.p-steps-item');
+
+            return firstSibling ? firstSibling.children[0] : null;
+        },
+        findLastItem() {
+            const siblings = DomHandler.find(this.$refs.list, '.p-steps-item');
+
+            return siblings ? siblings[siblings.length - 1].children[0] : null;
+        },
+        setFocusToMenuitem(target, focusableItem) {
+            target.tabIndex = '-1';
+            focusableItem.tabIndex = '0';
+            focusableItem.focus();
+        },
         isActive(item) {
             return item.to ? this.$router.resolve(item.to).path === this.$route.path : false;
         },
         getItemClass(item) {
-            return ['p-steps-item', item.class, {
-                'p-highlight p-steps-current': this.isActive(item),
-                'p-disabled': this.isItemDisabled(item)
-            }];
+            return [
+                'p-steps-item',
+                item.class,
+                {
+                    'p-highlight p-steps-current': this.isActive(item),
+                    'p-disabled': this.isItemDisabled(item)
+                }
+            ];
         },
         linkClass(routerProps) {
-            return ['p-menuitem-link', {
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         isItemDisabled(item) {
-            return (this.disabled(item) || (this.readonly && !this.isActive(item)));
+            return this.disabled(item) || (this.readonly && !this.isActive(item));
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     },
     computed: {
         containerClass() {
-            return ['p-steps p-component', {'p-readonly': this.readonly}];
+            return ['p-steps p-component', { 'p-readonly': this.readonly }];
         }
     }
 };
 
 const _hoisted_1 = ["id"];
-const _hoisted_2 = { role: "tablist" };
-const _hoisted_3 = ["aria-selected", "aria-expanded"];
-const _hoisted_4 = ["href", "onClick"];
-const _hoisted_5 = { class: "p-steps-number" };
-const _hoisted_6 = { class: "p-steps-title" };
+const _hoisted_2 = {
+  ref: "list",
+  class: "p-steps-list"
+};
+const _hoisted_3 = ["href", "aria-current", "onClick", "onKeydown"];
+const _hoisted_4 = { class: "p-steps-number" };
+const _hoisted_5 = { class: "p-steps-title" };
+const _hoisted_6 = ["onKeydown"];
 const _hoisted_7 = { class: "p-steps-number" };
 const _hoisted_8 = { class: "p-steps-title" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
 
-  return (openBlock(), createElementBlock("div", {
+  return (openBlock(), createElementBlock("nav", {
     id: $props.id,
     class: normalizeClass($options.containerClass)
   }, [
-    createElementVNode("ul", _hoisted_2, [
+    createElementVNode("ol", _hoisted_2, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.model, (item, index) => {
         return (openBlock(), createElementBlock(Fragment, {
           key: item.to
@@ -99,10 +199,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ? (openBlock(), createElementBlock("li", {
                 key: 0,
                 class: normalizeClass($options.getItemClass(item)),
-                style: normalizeStyle(item.style),
-                role: "tab",
-                "aria-selected": $options.isActive(item),
-                "aria-expanded": $options.isActive(item)
+                style: normalizeStyle(item.style)
               }, [
                 (!_ctx.$slots.item)
                   ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -112,37 +209,39 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             to: item.to,
                             custom: ""
                           }, {
-                            default: withCtx(({navigate, href, isActive, isExactActive}) => [
+                            default: withCtx(({ navigate, href, isActive, isExactActive }) => [
                               createElementVNode("a", {
                                 href: href,
-                                class: normalizeClass($options.linkClass({isActive, isExactActive})),
+                                class: normalizeClass($options.linkClass({ isActive, isExactActive })),
+                                tabindex: -1,
+                                "aria-current": isExactActive ? 'step' : undefined,
                                 onClick: $event => ($options.onItemClick($event, item, navigate)),
-                                role: "presentation"
+                                onKeydown: $event => ($options.onItemKeydown($event, item, navigate))
                               }, [
-                                createElementVNode("span", _hoisted_5, toDisplayString(index + 1), 1),
-                                createElementVNode("span", _hoisted_6, toDisplayString($options.label(item)), 1)
-                              ], 10, _hoisted_4)
+                                createElementVNode("span", _hoisted_4, toDisplayString(index + 1), 1),
+                                createElementVNode("span", _hoisted_5, toDisplayString($options.label(item)), 1)
+                              ], 42, _hoisted_3)
                             ]),
                             _: 2
                           }, 1032, ["to"]))
                         : (openBlock(), createElementBlock("span", {
                             key: 1,
                             class: normalizeClass($options.linkClass()),
-                            role: "presentation"
+                            onKeydown: $event => ($options.onItemKeydown($event, item))
                           }, [
                             createElementVNode("span", _hoisted_7, toDisplayString(index + 1), 1),
                             createElementVNode("span", _hoisted_8, toDisplayString($options.label(item)), 1)
-                          ], 2))
+                          ], 42, _hoisted_6))
                     ], 64))
                   : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
                       key: 1,
                       item: item
                     }, null, 8, ["item"]))
-              ], 14, _hoisted_3))
+              ], 6))
             : createCommentVNode("", true)
         ], 64))
       }), 128))
-    ])
+    ], 512)
   ], 10, _hoisted_1))
 }
 
@@ -173,7 +272,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-steps {\n    position: relative;\n}\n.p-steps ul {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-steps-item {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-steps-item .p-menuitem-link {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n}\n.p-steps.p-steps-readonly .p-steps-item {\n    cursor: auto;\n}\n.p-steps-item.p-steps-current .p-menuitem-link {\n    cursor: default;\n}\n.p-steps-title {\n    white-space: nowrap;\n}\n.p-steps-number {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-steps-title {\n    display: block;\n}\n";
+var css_248z = "\n.p-steps {\n    position: relative;\n}\n.p-steps .p-steps-list {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-steps-item {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-steps-item .p-menuitem-link {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n}\n.p-steps.p-steps-readonly .p-steps-item {\n    cursor: auto;\n}\n.p-steps-item.p-steps-current .p-menuitem-link {\n    cursor: default;\n}\n.p-steps-title {\n    white-space: nowrap;\n}\n.p-steps-number {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-steps-title {\n    display: block;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/steps/steps.esm.min.js

@@ -1 +1 @@
-import{UniqueComponentId as e}from"primevue/utils";import{resolveComponent as t,openBlock as n,createElementBlock as i,normalizeClass as s,createElementVNode as l,Fragment as a,renderList as o,normalizeStyle as p,createBlock as r,withCtx as c,toDisplayString as d,resolveDynamicComponent as m,createCommentVNode as u}from"vue";var b={name:"Steps",props:{id:{type:String,default:e()},model:{type:Array,default:null},readonly:{type:Boolean,default:!0},exact:{type:Boolean,default:!0}},methods:{onItemClick(e,t,n){this.disabled(t)||this.readonly?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},isActive(e){return!!e.to&&this.$router.resolve(e.to).path===this.$route.path},getItemClass(e){return["p-steps-item",e.class,{"p-highlight p-steps-current":this.isActive(e),"p-disabled":this.isItemDisabled(e)}]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},isItemDisabled(e){return this.disabled(e)||this.readonly&&!this.isActive(e)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label},computed:{containerClass(){return["p-steps p-component",{"p-readonly":this.readonly}]}}};const f=["id"],x={role:"tablist"},y=["aria-selected","aria-expanded"],k=["href","onClick"],v={class:"p-steps-number"},h={class:"p-steps-title"},g={class:"p-steps-number"},C={class:"p-steps-title"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-steps {\n    position: relative;\n}\n.p-steps ul {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-steps-item {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-steps-item .p-menuitem-link {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n}\n.p-steps.p-steps-readonly .p-steps-item {\n    cursor: auto;\n}\n.p-steps-item.p-steps-current .p-menuitem-link {\n    cursor: default;\n}\n.p-steps-title {\n    white-space: nowrap;\n}\n.p-steps-number {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-steps-title {\n    display: block;\n}\n"),b.render=function(e,b,w,A,I,E){const B=t("router-link");return n(),i("div",{id:w.id,class:s(E.containerClass)},[l("ul",x,[(n(!0),i(a,null,o(w.model,((t,o)=>(n(),i(a,{key:t.to},[E.visible(t)?(n(),i("li",{key:0,class:s(E.getItemClass(t)),style:p(t.style),role:"tab","aria-selected":E.isActive(t),"aria-expanded":E.isActive(t)},[e.$slots.item?(n(),r(m(e.$slots.item),{key:1,item:t},null,8,["item"])):(n(),i(a,{key:0},[E.isItemDisabled(t)?(n(),i("span",{key:1,class:s(E.linkClass()),role:"presentation"},[l("span",g,d(o+1),1),l("span",C,d(E.label(t)),1)],2)):(n(),r(B,{key:0,to:t.to,custom:""},{default:c((({navigate:e,href:n,isActive:i,isExactActive:a})=>[l("a",{href:n,class:s(E.linkClass({isActive:i,isExactActive:a})),onClick:n=>E.onItemClick(n,t,e),role:"presentation"},[l("span",v,d(o+1),1),l("span",h,d(E.label(t)),1)],10,k)])),_:2},1032,["to"]))],64))],14,y)):u("",!0)],64)))),128))])],10,f)};export{b as default};
+import{UniqueComponentId as e,DomHandler as t}from"primevue/utils";import{resolveComponent as n,openBlock as i,createElementBlock as s,normalizeClass as l,createElementVNode as a,Fragment as o,renderList as r,normalizeStyle as p,createBlock as c,withCtx as d,toDisplayString as m,resolveDynamicComponent as u,createCommentVNode as f}from"vue";var b={name:"Steps",props:{id:{type:String,default:e()},model:{type:Array,default:null},readonly:{type:Boolean,default:!0},exact:{type:Boolean,default:!0}},mounted(){this.findFirstItem().tabIndex="0"},methods:{onItemClick(e,t,n){this.disabled(t)||this.readonly?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},onItemKeydown(e,t,n){switch(e.code){case"ArrowRight":this.navigateToNextItem(e.target),e.preventDefault();break;case"ArrowLeft":this.navigateToPrevItem(e.target),e.preventDefault();break;case"Home":this.navigateToFirstItem(e.target),e.preventDefault();break;case"End":this.navigateToLastItem(e.target),e.preventDefault();break;case"Tab":break;case"Enter":case"Space":this.onItemClick(e,t,n),e.preventDefault()}},navigateToNextItem(e){const t=this.findNextItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToPrevItem(e){const t=this.findPrevItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToFirstItem(e){const t=this.findFirstItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToLastItem(e){const t=this.findLastItem(e);t&&this.setFocusToMenuitem(e,t)},findNextItem(e){const t=e.parentElement.nextElementSibling;return t?t.children[0]:null},findPrevItem(e){const t=e.parentElement.previousElementSibling;return t?t.children[0]:null},findFirstItem(){const e=t.findSingle(this.$refs.list,".p-steps-item");return e?e.children[0]:null},findLastItem(){const e=t.find(this.$refs.list,".p-steps-item");return e?e[e.length-1].children[0]:null},setFocusToMenuitem(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},isActive(e){return!!e.to&&this.$router.resolve(e.to).path===this.$route.path},getItemClass(e){return["p-steps-item",e.class,{"p-highlight p-steps-current":this.isActive(e),"p-disabled":this.isItemDisabled(e)}]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},isItemDisabled(e){return this.disabled(e)||this.readonly&&!this.isActive(e)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label},computed:{containerClass(){return["p-steps p-component",{"p-readonly":this.readonly}]}}};const h=["id"],x={ref:"list",class:"p-steps-list"},y=["href","aria-current","onClick","onKeydown"],v={class:"p-steps-number"},k={class:"p-steps-title"},g=["onKeydown"],I={class:"p-steps-number"},w={class:"p-steps-title"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-steps {\n    position: relative;\n}\n.p-steps .p-steps-list {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-steps-item {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-steps-item .p-menuitem-link {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n}\n.p-steps.p-steps-readonly .p-steps-item {\n    cursor: auto;\n}\n.p-steps-item.p-steps-current .p-menuitem-link {\n    cursor: default;\n}\n.p-steps-title {\n    white-space: nowrap;\n}\n.p-steps-number {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-steps-title {\n    display: block;\n}\n"),b.render=function(e,t,b,T,C,A){const E=n("router-link");return i(),s("nav",{id:b.id,class:l(A.containerClass)},[a("ol",x,[(i(!0),s(o,null,r(b.model,((t,n)=>(i(),s(o,{key:t.to},[A.visible(t)?(i(),s("li",{key:0,class:l(A.getItemClass(t)),style:p(t.style)},[e.$slots.item?(i(),c(u(e.$slots.item),{key:1,item:t},null,8,["item"])):(i(),s(o,{key:0},[A.isItemDisabled(t)?(i(),s("span",{key:1,class:l(A.linkClass()),onKeydown:e=>A.onItemKeydown(e,t)},[a("span",I,m(n+1),1),a("span",w,m(A.label(t)),1)],42,g)):(i(),c(E,{key:0,to:t.to,custom:""},{default:d((({navigate:e,href:i,isActive:s,isExactActive:o})=>[a("a",{href:i,class:l(A.linkClass({isActive:s,isExactActive:o})),tabindex:-1,"aria-current":o?"step":void 0,onClick:n=>A.onItemClick(n,t,e),onKeydown:n=>A.onItemKeydown(n,t,e)},[a("span",v,m(n+1),1),a("span",k,m(A.label(t)),1)],42,y)])),_:2},1032,["to"]))],64))],6)):f("",!0)],64)))),128))],512)],10,h)};export{b as default};

package/steps/steps.js

@@ -9,7 +9,7 @@ this.primevue.steps = (function (utils, vue) {
                 type: String,
                 default: utils.UniqueComponentId()
             },
-    		model: {
+            model: {
                 type: Array,
                 default: null
             },
@@ -22,10 +22,16 @@ this.primevue.steps = (function (utils, vue) {
                 default: true
             }
         },
+        mounted() {
+            const firstItem = this.findFirstItem();
+
+            firstItem.tabIndex = '0';
+        },
         methods: {
             onItemClick(event, item, navigate) {
                 if (this.disabled(item) || this.readonly) {
                     event.preventDefault();
+
                     return;
                 }
 
@@ -40,58 +46,152 @@ this.primevue.steps = (function (utils, vue) {
                     navigate(event);
                 }
             },
+            onItemKeydown(event, item, navigate) {
+                switch (event.code) {
+                    case 'ArrowRight': {
+                        this.navigateToNextItem(event.target);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'ArrowLeft': {
+                        this.navigateToPrevItem(event.target);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'Home': {
+                        this.navigateToFirstItem(event.target);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'End': {
+                        this.navigateToLastItem(event.target);
+                        event.preventDefault();
+                        break;
+                    }
+
+                    case 'Tab':
+                        //no op
+                        break;
+
+                    case 'Enter':
+
+                    case 'Space': {
+                        this.onItemClick(event, item, navigate);
+                        event.preventDefault();
+                        break;
+                    }
+                }
+            },
+            navigateToNextItem(target) {
+                const nextItem = this.findNextItem(target);
+
+                nextItem && this.setFocusToMenuitem(target, nextItem);
+            },
+            navigateToPrevItem(target) {
+                const prevItem = this.findPrevItem(target);
+
+                prevItem && this.setFocusToMenuitem(target, prevItem);
+            },
+            navigateToFirstItem(target) {
+                const firstItem = this.findFirstItem(target);
+
+                firstItem && this.setFocusToMenuitem(target, firstItem);
+            },
+            navigateToLastItem(target) {
+                const lastItem = this.findLastItem(target);
+
+                lastItem && this.setFocusToMenuitem(target, lastItem);
+            },
+            findNextItem(item) {
+                const nextItem = item.parentElement.nextElementSibling;
+
+                return nextItem ? nextItem.children[0] : null;
+            },
+            findPrevItem(item) {
+                const prevItem = item.parentElement.previousElementSibling;
+
+                return prevItem ? prevItem.children[0] : null;
+            },
+            findFirstItem() {
+                const firstSibling = utils.DomHandler.findSingle(this.$refs.list, '.p-steps-item');
+
+                return firstSibling ? firstSibling.children[0] : null;
+            },
+            findLastItem() {
+                const siblings = utils.DomHandler.find(this.$refs.list, '.p-steps-item');
+
+                return siblings ? siblings[siblings.length - 1].children[0] : null;
+            },
+            setFocusToMenuitem(target, focusableItem) {
+                target.tabIndex = '-1';
+                focusableItem.tabIndex = '0';
+                focusableItem.focus();
+            },
             isActive(item) {
                 return item.to ? this.$router.resolve(item.to).path === this.$route.path : false;
             },
             getItemClass(item) {
-                return ['p-steps-item', item.class, {
-                    'p-highlight p-steps-current': this.isActive(item),
-                    'p-disabled': this.isItemDisabled(item)
-                }];
+                return [
+                    'p-steps-item',
+                    item.class,
+                    {
+                        'p-highlight p-steps-current': this.isActive(item),
+                        'p-disabled': this.isItemDisabled(item)
+                    }
+                ];
             },
             linkClass(routerProps) {
-                return ['p-menuitem-link', {
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-                }];
+                return [
+                    'p-menuitem-link',
+                    {
+                        'router-link-active': routerProps && routerProps.isActive,
+                        'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                    }
+                ];
             },
             isItemDisabled(item) {
-                return (this.disabled(item) || (this.readonly && !this.isActive(item)));
+                return this.disabled(item) || (this.readonly && !this.isActive(item));
             },
             visible(item) {
-                return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+                return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
             },
             disabled(item) {
-                return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+                return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
             },
             label(item) {
-                return (typeof item.label === 'function' ? item.label() : item.label);
+                return typeof item.label === 'function' ? item.label() : item.label;
             }
         },
         computed: {
             containerClass() {
-                return ['p-steps p-component', {'p-readonly': this.readonly}];
+                return ['p-steps p-component', { 'p-readonly': this.readonly }];
             }
         }
     };
 
     const _hoisted_1 = ["id"];
-    const _hoisted_2 = { role: "tablist" };
-    const _hoisted_3 = ["aria-selected", "aria-expanded"];
-    const _hoisted_4 = ["href", "onClick"];
-    const _hoisted_5 = { class: "p-steps-number" };
-    const _hoisted_6 = { class: "p-steps-title" };
+    const _hoisted_2 = {
+      ref: "list",
+      class: "p-steps-list"
+    };
+    const _hoisted_3 = ["href", "aria-current", "onClick", "onKeydown"];
+    const _hoisted_4 = { class: "p-steps-number" };
+    const _hoisted_5 = { class: "p-steps-title" };
+    const _hoisted_6 = ["onKeydown"];
     const _hoisted_7 = { class: "p-steps-number" };
     const _hoisted_8 = { class: "p-steps-title" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("nav", {
         id: $props.id,
         class: vue.normalizeClass($options.containerClass)
       }, [
-        vue.createElementVNode("ul", _hoisted_2, [
+        vue.createElementVNode("ol", _hoisted_2, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
             return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: item.to
@@ -100,10 +200,7 @@ this.primevue.steps = (function (utils, vue) {
                 ? (vue.openBlock(), vue.createElementBlock("li", {
                     key: 0,
                     class: vue.normalizeClass($options.getItemClass(item)),
-                    style: vue.normalizeStyle(item.style),
-                    role: "tab",
-                    "aria-selected": $options.isActive(item),
-                    "aria-expanded": $options.isActive(item)
+                    style: vue.normalizeStyle(item.style)
                   }, [
                     (!_ctx.$slots.item)
                       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -113,37 +210,39 @@ this.primevue.steps = (function (utils, vue) {
                                 to: item.to,
                                 custom: ""
                               }, {
-                                default: vue.withCtx(({navigate, href, isActive, isExactActive}) => [
+                                default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
                                   vue.createElementVNode("a", {
                                     href: href,
-                                    class: vue.normalizeClass($options.linkClass({isActive, isExactActive})),
+                                    class: vue.normalizeClass($options.linkClass({ isActive, isExactActive })),
+                                    tabindex: -1,
+                                    "aria-current": isExactActive ? 'step' : undefined,
                                     onClick: $event => ($options.onItemClick($event, item, navigate)),
-                                    role: "presentation"
+                                    onKeydown: $event => ($options.onItemKeydown($event, item, navigate))
                                   }, [
-                                    vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(index + 1), 1),
-                                    vue.createElementVNode("span", _hoisted_6, vue.toDisplayString($options.label(item)), 1)
-                                  ], 10, _hoisted_4)
+                                    vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(index + 1), 1),
+                                    vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.label(item)), 1)
+                                  ], 42, _hoisted_3)
                                 ]),
                                 _: 2
                               }, 1032, ["to"]))
                             : (vue.openBlock(), vue.createElementBlock("span", {
                                 key: 1,
                                 class: vue.normalizeClass($options.linkClass()),
-                                role: "presentation"
+                                onKeydown: $event => ($options.onItemKeydown($event, item))
                               }, [
                                 vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(index + 1), 1),
                                 vue.createElementVNode("span", _hoisted_8, vue.toDisplayString($options.label(item)), 1)
-                              ], 2))
+                              ], 42, _hoisted_6))
                         ], 64))
                       : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
                           key: 1,
                           item: item
                         }, null, 8, ["item"]))
-                  ], 14, _hoisted_3))
+                  ], 6))
                 : vue.createCommentVNode("", true)
             ], 64))
           }), 128))
-        ])
+        ], 512)
       ], 10, _hoisted_1))
     }
 
@@ -174,7 +273,7 @@ this.primevue.steps = (function (utils, vue) {
       }
     }
 
-    var css_248z = "\n.p-steps {\n    position: relative;\n}\n.p-steps ul {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-steps-item {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-steps-item .p-menuitem-link {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n}\n.p-steps.p-steps-readonly .p-steps-item {\n    cursor: auto;\n}\n.p-steps-item.p-steps-current .p-menuitem-link {\n    cursor: default;\n}\n.p-steps-title {\n    white-space: nowrap;\n}\n.p-steps-number {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-steps-title {\n    display: block;\n}\n";
+    var css_248z = "\n.p-steps {\n    position: relative;\n}\n.p-steps .p-steps-list {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-steps-item {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-steps-item .p-menuitem-link {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n}\n.p-steps.p-steps-readonly .p-steps-item {\n    cursor: auto;\n}\n.p-steps-item.p-steps-current .p-menuitem-link {\n    cursor: default;\n}\n.p-steps-title {\n    white-space: nowrap;\n}\n.p-steps-number {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-steps-title {\n    display: block;\n}\n";
     styleInject(css_248z);
 
     script.render = render;

package/steps/steps.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.steps=function(e,t){"use strict";var n={name:"Steps",props:{id:{type:String,default:e.UniqueComponentId()},model:{type:Array,default:null},readonly:{type:Boolean,default:!0},exact:{type:Boolean,default:!0}},methods:{onItemClick(e,t,n){this.disabled(t)||this.readonly?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},isActive(e){return!!e.to&&this.$router.resolve(e.to).path===this.$route.path},getItemClass(e){return["p-steps-item",e.class,{"p-highlight p-steps-current":this.isActive(e),"p-disabled":this.isItemDisabled(e)}]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},isItemDisabled(e){return this.disabled(e)||this.readonly&&!this.isActive(e)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label},computed:{containerClass(){return["p-steps p-component",{"p-readonly":this.readonly}]}}};const i=["id"],l={role:"tablist"},s=["aria-selected","aria-expanded"],a=["href","onClick"],o={class:"p-steps-number"},r={class:"p-steps-title"},c={class:"p-steps-number"},p={class:"p-steps-title"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-steps {\n    position: relative;\n}\n.p-steps ul {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-steps-item {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-steps-item .p-menuitem-link {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n}\n.p-steps.p-steps-readonly .p-steps-item {\n    cursor: auto;\n}\n.p-steps-item.p-steps-current .p-menuitem-link {\n    cursor: default;\n}\n.p-steps-title {\n    white-space: nowrap;\n}\n.p-steps-number {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-steps-title {\n    display: block;\n}\n"),n.render=function(e,n,d,m,u,b){const k=t.resolveComponent("router-link");return t.openBlock(),t.createElementBlock("div",{id:d.id,class:t.normalizeClass(b.containerClass)},[t.createElementVNode("ul",l,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(d.model,((n,i)=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:n.to},[b.visible(n)?(t.openBlock(),t.createElementBlock("li",{key:0,class:t.normalizeClass(b.getItemClass(n)),style:t.normalizeStyle(n.style),role:"tab","aria-selected":b.isActive(n),"aria-expanded":b.isActive(n)},[e.$slots.item?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.item),{key:1,item:n},null,8,["item"])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[b.isItemDisabled(n)?(t.openBlock(),t.createElementBlock("span",{key:1,class:t.normalizeClass(b.linkClass()),role:"presentation"},[t.createElementVNode("span",c,t.toDisplayString(i+1),1),t.createElementVNode("span",p,t.toDisplayString(b.label(n)),1)],2)):(t.openBlock(),t.createBlock(k,{key:0,to:n.to,custom:""},{default:t.withCtx((({navigate:e,href:l,isActive:s,isExactActive:c})=>[t.createElementVNode("a",{href:l,class:t.normalizeClass(b.linkClass({isActive:s,isExactActive:c})),onClick:t=>b.onItemClick(t,n,e),role:"presentation"},[t.createElementVNode("span",o,t.toDisplayString(i+1),1),t.createElementVNode("span",r,t.toDisplayString(b.label(n)),1)],10,a)])),_:2},1032,["to"]))],64))],14,s)):t.createCommentVNode("",!0)],64)))),128))])],10,i)},n}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.steps=function(e,t){"use strict";var n={name:"Steps",props:{id:{type:String,default:e.UniqueComponentId()},model:{type:Array,default:null},readonly:{type:Boolean,default:!0},exact:{type:Boolean,default:!0}},mounted(){this.findFirstItem().tabIndex="0"},methods:{onItemClick(e,t,n){this.disabled(t)||this.readonly?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},onItemKeydown(e,t,n){switch(e.code){case"ArrowRight":this.navigateToNextItem(e.target),e.preventDefault();break;case"ArrowLeft":this.navigateToPrevItem(e.target),e.preventDefault();break;case"Home":this.navigateToFirstItem(e.target),e.preventDefault();break;case"End":this.navigateToLastItem(e.target),e.preventDefault();break;case"Tab":break;case"Enter":case"Space":this.onItemClick(e,t,n),e.preventDefault()}},navigateToNextItem(e){const t=this.findNextItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToPrevItem(e){const t=this.findPrevItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToFirstItem(e){const t=this.findFirstItem(e);t&&this.setFocusToMenuitem(e,t)},navigateToLastItem(e){const t=this.findLastItem(e);t&&this.setFocusToMenuitem(e,t)},findNextItem(e){const t=e.parentElement.nextElementSibling;return t?t.children[0]:null},findPrevItem(e){const t=e.parentElement.previousElementSibling;return t?t.children[0]:null},findFirstItem(){const t=e.DomHandler.findSingle(this.$refs.list,".p-steps-item");return t?t.children[0]:null},findLastItem(){const t=e.DomHandler.find(this.$refs.list,".p-steps-item");return t?t[t.length-1].children[0]:null},setFocusToMenuitem(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},isActive(e){return!!e.to&&this.$router.resolve(e.to).path===this.$route.path},getItemClass(e){return["p-steps-item",e.class,{"p-highlight p-steps-current":this.isActive(e),"p-disabled":this.isItemDisabled(e)}]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},isItemDisabled(e){return this.disabled(e)||this.readonly&&!this.isActive(e)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label},computed:{containerClass(){return["p-steps p-component",{"p-readonly":this.readonly}]}}};const i=["id"],s={ref:"list",class:"p-steps-list"},l=["href","aria-current","onClick","onKeydown"],a={class:"p-steps-number"},o={class:"p-steps-title"},r=["onKeydown"],c={class:"p-steps-number"},p={class:"p-steps-title"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-steps {\n    position: relative;\n}\n.p-steps .p-steps-list {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-steps-item {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n}\n.p-steps-item .p-menuitem-link {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n}\n.p-steps.p-steps-readonly .p-steps-item {\n    cursor: auto;\n}\n.p-steps-item.p-steps-current .p-menuitem-link {\n    cursor: default;\n}\n.p-steps-title {\n    white-space: nowrap;\n}\n.p-steps-number {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-steps-title {\n    display: block;\n}\n"),n.render=function(e,n,m,d,u,f){const b=t.resolveComponent("router-link");return t.openBlock(),t.createElementBlock("nav",{id:m.id,class:t.normalizeClass(f.containerClass)},[t.createElementVNode("ol",s,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(m.model,((n,i)=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:n.to},[f.visible(n)?(t.openBlock(),t.createElementBlock("li",{key:0,class:t.normalizeClass(f.getItemClass(n)),style:t.normalizeStyle(n.style)},[e.$slots.item?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.item),{key:1,item:n},null,8,["item"])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[f.isItemDisabled(n)?(t.openBlock(),t.createElementBlock("span",{key:1,class:t.normalizeClass(f.linkClass()),onKeydown:e=>f.onItemKeydown(e,n)},[t.createElementVNode("span",c,t.toDisplayString(i+1),1),t.createElementVNode("span",p,t.toDisplayString(f.label(n)),1)],42,r)):(t.openBlock(),t.createBlock(b,{key:0,to:n.to,custom:""},{default:t.withCtx((({navigate:e,href:s,isActive:r,isExactActive:c})=>[t.createElementVNode("a",{href:s,class:t.normalizeClass(f.linkClass({isActive:r,isExactActive:c})),tabindex:-1,"aria-current":c?"step":void 0,onClick:t=>f.onItemClick(t,n,e),onKeydown:t=>f.onItemKeydown(t,n,e)},[t.createElementVNode("span",a,t.toDisplayString(i+1),1),t.createElementVNode("span",o,t.toDisplayString(f.label(n)),1)],42,l)])),_:2},1032,["to"]))],64))],6)):t.createCommentVNode("",!0)],64)))),128))],512)],10,i)},n}(primevue.utils,Vue);