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; // (undocumented) + protected stepCompleteText(panelNumber: number): string; + // (undocumented) + protected stepErrorText(panelNumber: number): string; + // (undocumented) togglePanel(): void; // (undocumented) static ɵcmp: i0.ɵɵComponentDeclaration; @@ -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 > - - {{commonStrings.keys.danger}} - {{commonStrings.keys.success}} + + {{ stepErrorText(panelNumber)}} + + {{ stepCompleteText(panelNumber)}} + 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; }