diff --git a/apps/layout-test/src/app/app.component.ts b/apps/layout-test/src/app/app.component.ts index ef3a11f6..c0ebfa44 100644 --- a/apps/layout-test/src/app/app.component.ts +++ b/apps/layout-test/src/app/app.component.ts @@ -53,9 +53,9 @@ export class AppComponent { this.modalService .open({ component: ModalComponent, - label: 'Modal', role: 'dialog', panelClass: 'modal-panel', + labelledById: 'test', }) .pipe( tap((action) => { diff --git a/apps/layout-test/src/modal/modal.component.ts b/apps/layout-test/src/modal/modal.component.ts index fd730be1..143803d5 100644 --- a/apps/layout-test/src/modal/modal.component.ts +++ b/apps/layout-test/src/modal/modal.component.ts @@ -4,7 +4,7 @@ import { NgxModalAbstractComponent } from '@ngx/inform'; @Component({ selector: 'test-modal', template: ` - Hello world! + Hello world! `, diff --git a/libs/inform/README.md b/libs/inform/README.md index d200480b..df2e0001 100644 --- a/libs/inform/README.md +++ b/libs/inform/README.md @@ -133,7 +133,7 @@ On top of that, by passing a `modals` record, we can define a set preset modals The `NgxModalService` allows for two ways of opening a modal. Either by opening a predefined modal we set in the configuration, or a custom modal by passing a new modal component. -To make the modals ARIA compliant either a `label` or a `labelledById` must be provided. If the role of a modal was set to `alertdialog`, the `describedById` property is also required. +To make the modals ARIA compliant either a `label` or a `labelledById` must be provided. If the role of a modal was set to `alertdialog`, the `describedById` property is also required. If no element with the provided id was found in the modal, the `ngx-inform` package will throw an error. When opening a modal we can overwrite all the globally and modal-specific configuration using the same properties as mentioned earlier. On top of that, we can set several other properties. These properties are: diff --git a/libs/inform/src/lib/abstracts/modal/modal.abstract.component.ts b/libs/inform/src/lib/abstracts/modal/modal.abstract.component.ts index 8d97182d..0662de5e 100644 --- a/libs/inform/src/lib/abstracts/modal/modal.abstract.component.ts +++ b/libs/inform/src/lib/abstracts/modal/modal.abstract.component.ts @@ -1,11 +1,25 @@ -import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core'; +import { + AfterViewInit, + Directive, + ElementRef, + EventEmitter, + HostListener, + Inject, + Input, + Output, + PLATFORM_ID, +} from '@angular/core'; +import { isPlatformBrowser } from '@angular/common'; + import { NgxModalActionType } from '../../types'; /** * An abstract for the NgxModalService */ @Directive() -export class NgxModalAbstractComponent { +export class NgxModalAbstractComponent + implements AfterViewInit +{ /** * Remove the modal on escape pressed */ @@ -13,6 +27,16 @@ export class NgxModalAbstractComponent = new EventEmitter(); + + constructor( + @Inject(PLATFORM_ID) private platformId: string, + private readonly elementRef: ElementRef + ) {} + + public ngAfterViewInit(): void { + // Iben: If we are in the browser, check if either of the two accessibility labels are set + if (isPlatformBrowser(this.platformId) && (this.ariaLabelledBy || this.ariaDescribedBy)) { + // Iben: Find the element with the id and the parent + const element = document.getElementById(this.ariaLabelledBy || this.ariaDescribedBy); + const parent = this.elementRef.nativeElement; + + // Iben: If no corresponding element was found or if it isn't part of the modal, throw an error + if (!element || !parent.contains(element)) { + console.error( + `NgxModalAbstractComponent: The ${ + this.ariaLabelledBy ? '"aria-labelledBy"' : 'aria-describedBy' + } property was passed to the modal but no element with said id was found. Because of that, the necessary accessibility attributes could not be set. Please add an id with the value "${ + this.ariaLabelledBy || this.ariaDescribedBy + }" to an element of the modal.` + ); + } + } + } } diff --git a/libs/inform/src/lib/services/modal/modal.service.ts b/libs/inform/src/lib/services/modal/modal.service.ts index ca8eaf84..66508eef 100644 --- a/libs/inform/src/lib/services/modal/modal.service.ts +++ b/libs/inform/src/lib/services/modal/modal.service.ts @@ -204,6 +204,8 @@ export class NgxModalService { // Iben: Set the data of the modal modal.data = this.getValue(configuration?.data, options.data, undefined); + modal.ariaDescribedBy = options.describedById; + modal.ariaLabelledBy = options.labelledById; return modal; }