fix(a11y): stepper-completed step does not have accessible notificati…

…on after completion (backport to 15.x) (#1347)

Backport 0c02a7a 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

@@ -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;

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>

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;

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', () => {

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}',
 };

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;
 }