CQI #13742 Step aria-controls showcase

primefaces · Sep 26, 2023 · b4e65fa · b4e65fa
1 parent a33e8e7
commit b4e65fa
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 9 deletions.
diff --git a/src/app/components/api/menuitem.ts b/src/app/components/api/menuitem.ts
@@ -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;
     /**
@@ -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;
 }
 
 /**

diff --git a/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts
@@ -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)) }"

diff --git a/src/app/showcase/doc/steps/confirmationdemo.ts b/src/app/showcase/doc/steps/confirmationdemo.ts
@@ -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">

diff --git a/src/app/showcase/doc/steps/paymentdemo.ts b/src/app/showcase/doc/steps/paymentdemo.ts
@@ -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">

diff --git a/src/app/showcase/doc/steps/personaldemo.ts b/src/app/showcase/doc/steps/personaldemo.ts
@@ -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">

diff --git a/src/app/showcase/doc/steps/routingdoc.ts b/src/app/showcase/doc/steps/routingdoc.ts
@@ -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'
             }
         ];
 

diff --git a/src/app/showcase/doc/steps/seatdemo.ts b/src/app/showcase/doc/steps/seatdemo.ts
@@ -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">