diff --git a/src/angular/dialog/dialog-container.ts b/src/angular/dialog/dialog-container.ts index 606b54012c..6b5c1281e1 100644 --- a/src/angular/dialog/dialog-container.ts +++ b/src/angular/dialog/dialog-container.ts @@ -116,7 +116,7 @@ export abstract class _SbbDialogContainerBase extends CdkDialogContainer { + const index = queue.indexOf(this.id); + + if (index > -1) { + queue.splice(index, 1); } }); } diff --git a/src/angular/dialog/dialog.spec.ts b/src/angular/dialog/dialog.spec.ts index 2eeb093c67..83329797ac 100644 --- a/src/angular/dialog/dialog.spec.ts +++ b/src/angular/dialog/dialog.spec.ts @@ -1523,12 +1523,14 @@ describe('SbbDialog', () => { describe('dialog content elements', () => { let dialogRef: SbbDialogRef; + let hostInstance: ContentElementDialog | ComponentWithContentElementTemplateRef; describe('inside component dialog', () => { beforeEach(fakeAsync(() => { dialogRef = dialog.open(ContentElementDialog, { viewContainerRef: testViewContainerRef }); viewContainerFixture.detectChanges(); flush(); + hostInstance = dialogRef.componentInstance; })); runContentElementTests(); @@ -1545,6 +1547,7 @@ describe('SbbDialog', () => { viewContainerFixture.detectChanges(); flush(); + hostInstance = fixture.componentInstance; })); runContentElementTests(); @@ -1611,6 +1614,49 @@ describe('SbbDialog', () => { .toBe(title.id); })); + it('should update the aria-labelledby attribute if two titles are swapped', fakeAsync(() => { + const container = overlayContainerElement.querySelector('sbb-dialog-container')!; + let title = overlayContainerElement.querySelector('[sbb-dialog-title]')!; + + flush(); + viewContainerFixture.detectChanges(); + + const previousId = title.id; + expect(title.id).toBeTruthy(); + expect(container.getAttribute('aria-labelledby')).toBe(title.id); + + hostInstance.shownTitle = 'second'; + viewContainerFixture.detectChanges(); + flush(); + viewContainerFixture.detectChanges(); + title = overlayContainerElement.querySelector('[sbb-dialog-title]')!; + + expect(title.id).toBeTruthy(); + expect(title.id).not.toBe(previousId); + expect(container.getAttribute('aria-labelledby')).toBe(title.id); + })); + + it('should update the aria-labelledby attribute if multiple titles are present and one is removed', fakeAsync(() => { + const container = overlayContainerElement.querySelector('sbb-dialog-container')!; + + hostInstance.shownTitle = 'all'; + viewContainerFixture.detectChanges(); + flush(); + viewContainerFixture.detectChanges(); + + const titles = overlayContainerElement.querySelectorAll('[sbb-dialog-title]'); + + expect(titles.length).toBe(3); + expect(container.getAttribute('aria-labelledby')).toBe(titles[0].id); + + hostInstance.shownTitle = 'second'; + viewContainerFixture.detectChanges(); + flush(); + viewContainerFixture.detectChanges(); + + expect(container.getAttribute('aria-labelledby')).toBe(titles[1].id); + })); + it('should add correct css class according to given [align] input in [sbb-dialog-actions]', () => { const actions = overlayContainerElement.querySelector('sbb-dialog-actions')!; @@ -2105,7 +2151,9 @@ class PizzaMsg { @Component({ template: ` -

This is the title

+

This is the first title

+

This is the second title

+

This is the third title

Lorem ipsum dolor sit amet. @@ -2120,12 +2168,20 @@ class PizzaMsg { `, }) -class ContentElementDialog {} +class ContentElementDialog { + shownTitle: 'first' | 'second' | 'third' | 'all' = 'first'; + + shouldShowTitle(name: string) { + return this.shownTitle === 'all' || this.shownTitle === name; + } +} @Component({ template: ` -

This is the title

+

This is the first title

+

This is the second title

+

This is the third title

Lorem ipsum dolor sit amet. @@ -2143,6 +2199,11 @@ class ContentElementDialog {} }) class ComponentWithContentElementTemplateRef { @ViewChild(TemplateRef) templateRef: TemplateRef; + shownTitle: 'first' | 'second' | 'third' | 'all' = 'first'; + + shouldShowTitle(name: string) { + return this.shownTitle === 'all' || this.shownTitle === name; + } } @Component({ diff --git a/src/angular/lightbox/lightbox-container.ts b/src/angular/lightbox/lightbox-container.ts index 5b4028f323..1432c10616 100644 --- a/src/angular/lightbox/lightbox-container.ts +++ b/src/angular/lightbox/lightbox-container.ts @@ -39,7 +39,7 @@ import { sbbLightboxAnimations } from './lightbox-animations'; '[id]': '_config.id', '[attr.role]': '_config.role', '[attr.aria-modal]': '_config.ariaModal', - '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy', + '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]', '[attr.aria-label]': '_config.ariaLabel', '[attr.aria-describedby]': '_config.ariaDescribedBy || null', '[@lightboxContainer]': `_getAnimationState()`,