From 21c99249ee2c8c0a202e34835e7af79d6e8b78ac Mon Sep 17 00:00:00 2001
From: Giacomo Del Moro <giacomo.delmoro@gmail.com>
Date: Tue, 26 Sep 2023 10:17:28 +0200
Subject: [PATCH 1/3] Fix #13742 Step component accessibility improvements

---
 src/app/components/steps/steps.ts | 41 ++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts
index af6aaa7b8f4..8ccaf10c839 100755
--- a/src/app/components/steps/steps.ts
+++ b/src/app/components/steps/steps.ts
@@ -21,9 +21,7 @@ import { Subscription } from 'rxjs';
                     #menuitem
                     [ngStyle]="item.style"
                     [class]="item.styleClass"
-                    role="tab"
-                    [attr.aria-selected]="i === activeIndex"
-                    [attr.aria-expanded]="i === activeIndex"
+                    role="presentation"
                     pTooltip
                     [tooltipOptions]="item.tooltipOptions"
                     [ngClass]="{ 'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i)) }"
@@ -33,7 +31,7 @@ import { Subscription } from 'rxjs';
                         *ngIf="isClickableRouterLink(item); else elseBlock"
                         [routerLink]="item.routerLink"
                         [queryParams]="item.queryParams"
-                        role="presentation"
+                        role="tab"
                         [routerLinkActive]="'p-menuitem-link-active'"
                         [routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
                         class="p-menuitem-link"
@@ -41,14 +39,17 @@ import { Subscription } from 'rxjs';
                         (keydown)="onItemKeydown($event, item, i)"
                         [target]="item.target"
                         [attr.id]="item.id"
-                        [attr.tabindex]="item.disabled || readonly ? null : item.tabindex ? item.tabindex : '-1'"
+                        [attr.tabindex]="getItemTabIndex(item, i)"
+                        [attr.aria-selected]="i === activeIndex"
+                        [attr.aria-expanded]="i === activeIndex"
+                        [attr.aria-disabled]="item.disabled || (readonly && i !== activeIndex)"
                         [fragment]="item.fragment"
                         [queryParamsHandling]="item.queryParamsHandling"
                         [preserveFragment]="item.preserveFragment"
                         [skipLocationChange]="item.skipLocationChange"
                         [replaceUrl]="item.replaceUrl"
                         [state]="item.state"
-                        [ariaCurrentWhenActive]="exact ? 'step' : undefined"
+                        [ariaCurrentWhenActive]="exact && (!item.disabled || readonly) ? 'step' : undefined"
                     >
                         <span class="p-steps-number">{{ i + 1 }}</span>
                         <span class="p-steps-title" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
@@ -58,13 +59,16 @@ import { Subscription } from 'rxjs';
                         <a
                             [attr.href]="item.url"
                             class="p-menuitem-link"
-                            role="presentation"
+                            role="tab"
                             (click)="onItemClick($event, item, i)"
                             (keydown)="onItemKeydown($event, item, i)"
                             [target]="item.target"
                             [attr.id]="item.id"
-                            [attr.tabindex]="item.disabled || (i !== activeIndex && readonly) ? null : item.tabindex ? item.tabindex : '-1'"
-                            [ariaCurrentWhenActive]="exact ? 'step' : undefined"
+                            [attr.tabindex]="getItemTabIndex(item, i)"
+                            [attr.aria-selected]="i === activeIndex"
+                            [attr.aria-expanded]="i === activeIndex"
+                            [attr.aria-disabled]="item.disabled || (readonly && i !== activeIndex)"
+                            [ariaCurrentWhenActive]="exact && (!item.disabled || readonly) ? 'step' : undefined"
                         >
                             <span class="p-steps-number">{{ i + 1 }}</span>
                             <span class="p-steps-title" *ngIf="item.escape !== false; else htmlRouteLabel">{{ item.label }}</span>
@@ -178,11 +182,14 @@ export class Steps implements OnInit, OnDestroy {
             }
 
             case 'Tab':
-                //no op
+                if (i !== this.activeIndex) {
+                    const siblings = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="menuitem"]');
+                    siblings[i].children[0].tabIndex = '-1';
+                    siblings[this.activeIndex].children[0].tabIndex = '0';
+                }
                 break;
 
             case 'Enter':
-
             case 'Space': {
                 this.onItemClick(event, item, i);
                 event.preventDefault();
@@ -254,6 +261,18 @@ export class Steps implements OnInit, OnDestroy {
         return index === this.activeIndex;
     }
 
+    getItemTabIndex(item: MenuItem, index: number): string {
+        if (item.disabled) {
+            return '-1';
+        }
+
+        if (!item.disabled && (this.activeIndex === index)) {
+            return item.tabindex || '0';
+        }
+
+        return item.tabindex ?? '-1';
+    }
+
     ngOnDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();

From 03c7620558a5e1590516bfa54bb1467470c73c4c Mon Sep 17 00:00:00 2001
From: Giacomo Del Moro <giacomo.delmoro@gmail.com>
Date: Tue, 26 Sep 2023 10:36:17 +0200
Subject: [PATCH 2/3] Fix #13742 format fix

---
 src/app/components/steps/steps.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts
index 8ccaf10c839..061ed880874 100755
--- a/src/app/components/steps/steps.ts
+++ b/src/app/components/steps/steps.ts
@@ -266,7 +266,7 @@ export class Steps implements OnInit, OnDestroy {
             return '-1';
         }
 
-        if (!item.disabled && (this.activeIndex === index)) {
+        if (!item.disabled && this.activeIndex === index) {
             return item.tabindex || '0';
         }
 

From e6c9ae9de3872a794295eb6e04a1a2478e5da8a3 Mon Sep 17 00:00:00 2001
From: Giacomo Del Moro <giacomo.delmoro@gmail.com>
Date: Wed, 11 Oct 2023 15:01:56 +0200
Subject: [PATCH 3/3] Bugfix #13742 fix after merge

---
 src/app/components/steps/steps.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts
index c7a627706de..9aeee78bda8 100755
--- a/src/app/components/steps/steps.ts
+++ b/src/app/components/steps/steps.ts
@@ -22,6 +22,7 @@ import { Subscription } from 'rxjs';
                     [ngStyle]="item.style"
                     [class]="item.styleClass"
                     role="presentation"
+                    [attr.id]="item.id"
                     pTooltip
                     [tooltipOptions]="item.tooltipOptions"
                     [ngClass]="{ 'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i)) }"
@@ -38,7 +39,6 @@ import { Subscription } from 'rxjs';
                         (click)="onItemClick($event, item, i)"
                         (keydown)="onItemKeydown($event, item, i)"
                         [target]="item.target"
-                        [attr.id]="item.id"
                         [attr.tabindex]="getItemTabIndex(item, i)"
                         [attr.aria-selected]="i === activeIndex"
                         [attr.aria-expanded]="i === activeIndex"
@@ -63,7 +63,6 @@ import { Subscription } from 'rxjs';
                             (click)="onItemClick($event, item, i)"
                             (keydown)="onItemKeydown($event, item, i)"
                             [target]="item.target"
-                            [attr.id]="item.id"
                             [attr.tabindex]="getItemTabIndex(item, i)"
                             [attr.aria-selected]="i === activeIndex"
                             [attr.aria-expanded]="i === activeIndex"