Skip to content

Commit

Permalink
fix(angular/dialog): update aria-labelledby if title is swapped (#1973)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
mhaertwig authored and github-actions committed Aug 17, 2023
1 parent e36f343 commit 91069e6
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 8 deletions.
2 changes: 1 addition & 1 deletion src/angular/dialog/dialog-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()`,
Expand Down
23 changes: 20 additions & 3 deletions src/angular/dialog/dialog-content-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
HostListener,
Input,
OnChanges,
OnDestroy,
OnInit,
Optional,
SimpleChanges,
Expand Down Expand Up @@ -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++}`;

Expand Down Expand Up @@ -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);
}
});
}
Expand Down
67 changes: 64 additions & 3 deletions src/angular/dialog/dialog.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -1545,6 +1547,7 @@ describe('SbbDialog', () => {

viewContainerFixture.detectChanges();
flush();
hostInstance = fixture.componentInstance;
}));

runContentElementTests();
Expand Down Expand Up @@ -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')!;

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion src/angular/lightbox/lightbox-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()`,
Expand Down

0 comments on commit 91069e6

Please sign in to comment.