From 0046b20121f37eb4047e5943cdaaf0b6cb461b4f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 4 Apr 2024 11:19:40 +0530
Subject: [PATCH] fix(a11y): stepper-completed step does not have accessible
 notification after completion (backport to 15.x) (#1347)

Backport 0c02a7a2478763f9bc711d526a9ef9f81ffc6bc8 from #1334. <br> ## PR
Checklist

Please check if your PR fulfills the following requirements:

- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

&lt;!-- Please check the one that applies to this PR using
&quot;x&quot;. --&gt;

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
In the Stepper, when the step is complete, keyboard focus moves to the
next step but there&#39;s no indication that the previous step is
completed by the screen reader.
&lt;!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. --&gt;

Issue Number: [CDE-699](https://jira.eng.vmware.com/browse/CDE-699)

## What is the new behavior?
The screen reader will announce that the current step is complete (or
failed) and move focus to the next step or stay in the same step in case
of an error.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

&lt;!-- If this PR contains a breaking change, please describe the
impact and migration path for existing applications below. --&gt;

## Other information

Co-authored-by: Andrea A Fernandes <andy2890@gmail.com>
---
 projects/angular/clarity.api.md                           | 8 ++++++++
 projects/angular/src/accordion/accordion-panel.html       | 8 +++++---
 projects/angular/src/accordion/accordion-panel.ts         | 8 ++++++++
 .../angular/src/accordion/stepper/stepper-panel.spec.ts   | 4 ++--
 projects/angular/src/utils/i18n/common-strings.default.ts | 4 ++++
 .../angular/src/utils/i18n/common-strings.interface.ts    | 4 ++++
 6 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
index 153cee9d19..1993324c2d 100644
--- a/projects/angular/clarity.api.md
+++ b/projects/angular/clarity.api.md
@@ -318,6 +318,10 @@ export class ClrAccordionPanel implements OnInit, OnChanges {
     // (undocumented)
     panelOpenChange: EventEmitter<boolean>;
     // (undocumented)
+    protected stepCompleteText(panelNumber: number): string;
+    // (undocumented)
+    protected stepErrorText(panelNumber: number): string;
+    // (undocumented)
     togglePanel(): void;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrAccordionPanel, "clr-accordion-panel", never, { "disabled": "clrAccordionPanelDisabled"; "panelOpen": "clrAccordionPanelOpen"; }, { "panelOpenChange": "clrAccordionPanelOpenChange"; }, ["accordionDescription"], ["clr-accordion-title, clr-step-title", "clr-accordion-description, clr-step-description", "*"], false, never>;
@@ -995,6 +999,10 @@ export interface ClrCommonStrings {
     singleSelectionAriaLabel: string;
     sortColumn: string;
     stackViewChanged: string;
+    // (undocumented)
+    stepComplete: string;
+    // (undocumented)
+    stepError: string;
     success: string;
     // (undocumented)
     timelineStepCurrent: string;
diff --git a/projects/angular/src/accordion/accordion-panel.html b/projects/angular/src/accordion/accordion-panel.html
index 430abb5094..b6fcf49d62 100644
--- a/projects/angular/src/accordion/accordion-panel.html
+++ b/projects/angular/src/accordion/accordion-panel.html
@@ -13,9 +13,11 @@
         [class.clr-accordion-header-has-description]="(accordionDescription.changes | async)?.length || accordionDescription.length"
         #headerButton
       >
-        <span class="clr-sr-only">
-          <ng-container *ngIf="panel.status === AccordionStatus.Error">{{commonStrings.keys.danger}}</ng-container>
-          <ng-container *ngIf="panel.status === AccordionStatus.Complete">{{commonStrings.keys.success}}</ng-container>
+        <span class="clr-sr-only" role="status">
+          <ng-container *ngIf="panel.status === AccordionStatus.Error"> {{ stepErrorText(panelNumber)}} </ng-container>
+          <ng-container *ngIf="panel.status === AccordionStatus.Complete">
+            {{ stepCompleteText(panelNumber)}}
+          </ng-container>
         </span>
         <span class="clr-accordion-status">
           <cds-icon shape="angle" direction="right" class="clr-accordion-angle"></cds-icon>
diff --git a/projects/angular/src/accordion/accordion-panel.ts b/projects/angular/src/accordion/accordion-panel.ts
index cfe8e3cc72..b8e6c82540 100644
--- a/projects/angular/src/accordion/accordion-panel.ts
+++ b/projects/angular/src/accordion/accordion-panel.ts
@@ -111,6 +111,14 @@ export class ClrAccordionPanel implements OnInit, OnChanges {
     return `clr-accordion-header-${id}`;
   }
 
+  protected stepCompleteText(panelNumber: number) {
+    return this.commonStrings.parse(this.commonStrings.keys.stepComplete, { STEP: panelNumber.toString() });
+  }
+
+  protected stepErrorText(panelNumber: number) {
+    return this.commonStrings.parse(this.commonStrings.keys.stepError, { STEP: panelNumber.toString() });
+  }
+
   private emitPanelChange(panel: AccordionPanelModel) {
     if (panel.index !== this._panelIndex) {
       this._panelIndex = panel.index;
diff --git a/projects/angular/src/accordion/stepper/stepper-panel.spec.ts b/projects/angular/src/accordion/stepper/stepper-panel.spec.ts
index 4d4186d489..edb42913a4 100644
--- a/projects/angular/src/accordion/stepper/stepper-panel.spec.ts
+++ b/projects/angular/src/accordion/stepper/stepper-panel.spec.ts
@@ -88,13 +88,13 @@ describe('ClrStep Reactive Forms', () => {
       fixture.detectChanges();
 
       const statusMessage = fixture.nativeElement.querySelector('button .clr-sr-only');
-      expect(statusMessage.innerText.trim()).toBe('Error');
+      expect(statusMessage.innerText.trim()).toBe('Error in step 1');
 
       mockStep.status = AccordionStatus.Complete;
       (stepperService as MockStepperService).step.next(mockStep);
       fixture.detectChanges();
 
-      expect(statusMessage.innerText.trim()).toBe('Success');
+      expect(statusMessage.innerText.trim()).toBe(`Step 1 complete`);
     });
 
     it('should add aria-disabled attribute to the header button based on the appropriate step state', () => {
diff --git a/projects/angular/src/utils/i18n/common-strings.default.ts b/projects/angular/src/utils/i18n/common-strings.default.ts
index 3da4f90010..7382210bc1 100644
--- a/projects/angular/src/utils/i18n/common-strings.default.ts
+++ b/projects/angular/src/utils/i18n/common-strings.default.ts
@@ -113,4 +113,8 @@ export const commonStringsDefault: ClrCommonStrings = {
    * Datagrid footer; sr-only text after the number of selected rows.
    */
   selectedRows: 'Selected rows',
+
+  // Accordion/Stepper
+  stepComplete: 'Step {STEP} complete',
+  stepError: 'Error in step {STEP}',
 };
diff --git a/projects/angular/src/utils/i18n/common-strings.interface.ts b/projects/angular/src/utils/i18n/common-strings.interface.ts
index 621255e44b..8d6a877ed9 100644
--- a/projects/angular/src/utils/i18n/common-strings.interface.ts
+++ b/projects/angular/src/utils/i18n/common-strings.interface.ts
@@ -290,4 +290,8 @@ export interface ClrCommonStrings {
    * Datagrid footer; sr-only text after the number of selected rows.
    */
   selectedRows: string;
+
+  //Stepper: Screen-reader text for completed/failed step
+  stepComplete: string;
+  stepError: string;
 }