Skip to content

Commit

Permalink
feat(stepper): remove aria-live announcement for error state
Browse files Browse the repository at this point in the history
BREAKING CHANGE: The stepper will no longer announce error states.
Applications can use `LiveAnnouncer` from `@angular/cdk` to handle any required announcements.
  • Loading branch information
kevinbuhmann committed Dec 19, 2022
1 parent d17e927 commit 3250027
Show file tree
Hide file tree
Showing 2 changed files with 0 additions and 18 deletions.
4 changes: 0 additions & 4 deletions projects/angular/src/accordion/accordion-panel.html
@@ -1,8 +1,4 @@
<ng-container *ngIf="panel | async; let panel">
<div *ngIf="panel.status !== AccordionStatus.Inactive" aria-live="assertive" class="clr-sr-only">
<ng-container *ngIf="panel.status === AccordionStatus.Error">{{commonStrings.keys.danger}}</ng-container>
</div>

<div [ngClass]="getPanelStateClasses(panel)">
<div class="clr-accordion-header">
<button
Expand Down
14 changes: 0 additions & 14 deletions projects/angular/src/accordion/stepper/stepper-panel.spec.ts
Expand Up @@ -81,20 +81,6 @@ describe('ClrStep Reactive Forms', () => {
expect(stepperPanelElement.classList.contains('clr-accordion-panel')).toBe(true);
});

it('should show the appropriate aria-live message based on form state', () => {
const mockStep = new AccordionPanelModel('groupName', 0);
const stepperService = fixture.debugElement.query(By.directive(ClrStepperPanel)).injector.get(StepperService);
let liveSection: HTMLElement = fixture.nativeElement.querySelector('[aria-live="assertive"]');
expect(liveSection).toBe(null);

mockStep.status = AccordionStatus.Error;
(stepperService as MockStepperService).step.next(mockStep);
fixture.detectChanges();
liveSection = fixture.nativeElement.querySelector('[aria-live="assertive"]');
expect(liveSection).toBeTruthy();
expect(liveSection.innerText.trim()).toBe('Error');
});

it('should show appropriate screen reader only status in button based on form state', () => {
const mockStep = new AccordionPanelModel('groupName', 0);
const stepperService = fixture.debugElement.query(By.directive(ClrStepperPanel)).injector.get(StepperService);
Expand Down

0 comments on commit 3250027

Please sign in to comment.