fix(angular/dialog): update aria-labelledby if title is swapped (#1973)

Currently the dialog assigns the ID of the title as the aria-labelleledby of the container, but it doesn't update it if the title is swapped out or removed.

These changes add a queue of possible IDs that the container can use as titles are being created or destroyed.

src/angular/dialog/dialog-container.ts

@@ -116,7 +116,7 @@ export abstract class _SbbDialogContainerBase extends CdkDialogContainer<SbbDial
     '[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',
     '[@dialogContainer]': `_getAnimationState()`,

src/angular/dialog/dialog-content-directives.ts

@@ -10,6 +10,7 @@ import {
   HostListener,
   Input,
   OnChanges,
+  OnDestroy,
   OnInit,
   Optional,
   SimpleChanges,
@@ -101,7 +102,7 @@ export class SbbDialogClose implements OnInit, OnChanges {
  */
 @Directive()
 // tslint:disable-next-line: class-name naming-convention
-export class _SbbDialogTitleBase implements OnInit {
+export class _SbbDialogTitleBase implements OnInit, OnDestroy {
   /** Unique id for the dialog title. If none is supplied, it will be auto-generated. */
   @Input() id: string = `sbb-dialog-title-${dialogElementUid++}`;
 
@@ -142,8 +143,24 @@ export class _SbbDialogTitleBase implements OnInit {
           this._closeEnabled = false;
           this._changeDetectorRef.markForCheck();
         }
-        if (!container._ariaLabelledBy) {
-          container._ariaLabelledBy = this.id;
+        // Note: we null check the queue, because there are some internal
+        // tests that are mocking out `SbbDialogRef` incorrectly.
+        container._ariaLabelledByQueue?.push(this.id);
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    // Note: we null check the queue, because there are some internal
+    // tests that are mocking out `MatDialogRef` incorrectly.
+    const queue = this._dialogRef?._containerInstance?._ariaLabelledByQueue;
+
+    if (queue) {
+      Promise.resolve().then(() => {
+        const index = queue.indexOf(this.id);
+
+        if (index > -1) {
+          queue.splice(index, 1);
         }
       });
     }

src/angular/dialog/dialog.spec.ts

@@ -1523,12 +1523,14 @@ describe('SbbDialog', () => {
 
   describe('dialog content elements', () => {
     let dialogRef: SbbDialogRef<any>;
+    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: `
-    <h1 sbb-dialog-title>This is the title</h1>
+    <h1 sbb-dialog-title *ngIf="shouldShowTitle('first')">This is the first title</h1>
+    <h1 sbb-dialog-title *ngIf="shouldShowTitle('second')">This is the second title</h1>
+    <h1 sbb-dialog-title *ngIf="shouldShowTitle('third')">This is the third title</h1>
     <sbb-dialog-content>Lorem ipsum dolor sit amet.</sbb-dialog-content>
     <sbb-dialog-actions>
       <button sbb-dialog-close>Close</button>
@@ -2120,12 +2168,20 @@ class PizzaMsg {
     </sbb-dialog-actions>
   `,
 })
-class ContentElementDialog {}
+class ContentElementDialog {
+  shownTitle: 'first' | 'second' | 'third' | 'all' = 'first';
+
+  shouldShowTitle(name: string) {
+    return this.shownTitle === 'all' || this.shownTitle === name;
+  }
+}
 
 @Component({
   template: `
     <ng-template>
-      <h1 sbb-dialog-title>This is the title</h1>
+      <h1 sbb-dialog-title *ngIf="shouldShowTitle('first')">This is the first title</h1>
+      <h1 sbb-dialog-title *ngIf="shouldShowTitle('second')">This is the second title</h1>
+      <h1 sbb-dialog-title *ngIf="shouldShowTitle('third')">This is the third title</h1>
       <sbb-dialog-content>Lorem ipsum dolor sit amet.</sbb-dialog-content>
       <sbb-dialog-actions>
         <button sbb-dialog-close>Close</button>
@@ -2143,6 +2199,11 @@ class ContentElementDialog {}
 })
 class ComponentWithContentElementTemplateRef {
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
+  shownTitle: 'first' | 'second' | 'third' | 'all' = 'first';
+
+  shouldShowTitle(name: string) {
+    return this.shownTitle === 'all' || this.shownTitle === name;
+  }
 }
 
 @Component({

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()`,