Skip to content

Commit

Permalink
CQI primefaces#13742 Step aria-controls showcase
Browse files Browse the repository at this point in the history
  • Loading branch information
GiacomoDM committed Sep 26, 2023
1 parent a33e8e7 commit b4e65fa
Show file tree
Hide file tree
Showing 7 changed files with 19 additions and 9 deletions.
6 changes: 5 additions & 1 deletion src/app/components/api/menuitem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export interface MenuItem {
/**
* How to handle query parameters in the router link for the next navigation. One of:
merge : Merge new with current parameters.
preserve : Preserve current parameters.k.
preserve : Preserve current parameters.k.
*/
queryParamsHandling?: QueryParamsHandling;
/**
Expand Down Expand Up @@ -143,6 +143,10 @@ export interface MenuItem {
* @see {TooltipOptions}
*/
tooltipOptions?: TooltipOptions;
/**
* Id of the controlled element. Allows to set or override the aria-controls attribute of the HTML element that requires it for this MenuItem
*/
overrideAriaControls?: string;
}

/**
Expand Down
1 change: 1 addition & 0 deletions src/app/components/steps/steps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { Subscription } from 'rxjs';
role="tab"
[attr.aria-selected]="i === activeIndex"
[attr.aria-expanded]="i === activeIndex"
[attr.aria-controls]="item.overrideAriaControls"
pTooltip
[tooltipOptions]="item.tooltipOptions"
[ngClass]="{ 'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i)) }"
Expand Down
2 changes: 1 addition & 1 deletion src/app/showcase/doc/steps/confirmationdemo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Router } from '@angular/router';
@Component({
template: `
<div class="stepsdemo-content">
<p-card>
<p-card id="confirmation-step">
<ng-template pTemplate="title"> Confirmation </ng-template>
<ng-template pTemplate="subtitle"> Enter your card details </ng-template>
<ng-template pTemplate="content">
Expand Down
2 changes: 1 addition & 1 deletion src/app/showcase/doc/steps/paymentdemo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Router } from '@angular/router';
@Component({
template: `
<div class="stepsdemo-content">
<p-card>
<p-card id="payment-step">
<ng-template pTemplate="title"> Payment Information </ng-template>
<ng-template pTemplate="subtitle"> Enter your card details </ng-template>
<ng-template pTemplate="content">
Expand Down
2 changes: 1 addition & 1 deletion src/app/showcase/doc/steps/personaldemo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Router } from '@angular/router';
@Component({
template: `
<div class="stepsdemo-content">
<p-card>
<p-card id="personal-step">
<ng-template pTemplate="title"> Personal Information </ng-template>
<ng-template pTemplate="subtitle"> Enter your personal information </ng-template>
<ng-template pTemplate="content">
Expand Down
13 changes: 9 additions & 4 deletions src/app/showcase/doc/steps/routingdoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,24 @@ export class RoutingDoc implements OnInit {
this.items = [
{
label: 'Personal',
routerLink: ''
routerLink: '',
overrideAriaControls: 'personal-step'

},
{
label: 'Seat',
routerLink: 'seat'
routerLink: 'seat',
overrideAriaControls: 'seat-step'
},
{
label: 'Payment',
routerLink: 'payment'
routerLink: 'payment',
overrideAriaControls: 'payment-step'
},
{
label: 'Confirmation',
routerLink: 'confirmation'
routerLink: 'confirmation',
overrideAriaControls: 'confirmation-step'
}
];

Expand Down
2 changes: 1 addition & 1 deletion src/app/showcase/doc/steps/seatdemo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Router } from '@angular/router';
@Component({
template: `
<div class="stepsdemo-content">
<p-card>
<p-card id="seat-step">
<ng-template pTemplate="title"> Seat Information </ng-template>
<ng-template pTemplate="subtitle"> Choose your seat </ng-template>
<ng-template pTemplate="content">
Expand Down

0 comments on commit b4e65fa

Please sign in to comment.