Merge pull request #13743 from GiacomoDM/bugfix/#13742

Fix #13742 Step component accessibility improvements

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"
                     [attr.id]="item.id"
                     pTooltip
                     [tooltipOptions]="item.tooltipOptions"
@@ -34,14 +32,17 @@ 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"
                         (click)="onItemClick($event, item, i)"
                         (keydown)="onItemKeydown($event, item, i)"
                         [target]="item.target"
-                        [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"
@@ -58,12 +59,15 @@ 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.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>
@@ -177,11 +181,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();
@@ -253,6 +260,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();