diff --git a/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts index 9f67dcf88c1..9aeee78bda8 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" [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'; {{ i + 1 }} {{ item.label }} @@ -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();