feat(design): allow aria-labelledby to be set by the DaffModalService (#2967)

Author: xelaint

libs/design/modal/README.md

@@ -26,7 +26,20 @@ Buttons can be added to a modal by using `<daff-modal-actions>`. This container
 A modal can be dismissed via the close button or the `ESC` key. The close button is shown by default but can be hidden by setting the `dismissible` property to `false` on `<daff-modal-header>`. Additionally, the `[daffModalClose]` directive can be added to a `<button>` HTML element.
 
 ## Accessibility
-Modal works with the ARIA `role="dialog"` and `aria-modal="true"` attributes to provide an accessible experience. `aria-labelledby` is assigned the `[daffModalTitle]` string. When a modal is opened, the first tabbable element within it will receive focus.
+Modal works with the ARIA `role="dialog"` and `aria-modal="true"` attributes to provide an accessible experience. The first tabbable element will receive focus when a modal is opened.
+
+`aria-labelledby` is assigned the `[daffModalTitle]` string when it's used. If there is no title, `aria-labelledby` should be set in the configurations through the `DaffModalService`.
+
+```ts
+constructor(private modalService: DaffModalService) {}
+
+showModal() {
+	this.modal = this.modalService.open(
+		BasicModalContentComponent,
+		{ ariaLabelledBy: 'Modal Title' },
+	);
+}
+```
 
 ### Keyboard Interactions
 A modal can be closed by choosing one of the actions buttons, the close button in the header, or it can be dismissed by pressing the `ESC` key.

libs/design/modal/examples/src/basic-modal/basic-modal.component.ts

@@ -26,6 +26,9 @@ export class BasicModalComponent {
   constructor(private modalService: DaffModalService) {}
 
   showModal() {
-    this.modal = this.modalService.open(BasicModalContentComponent);
+    this.modal = this.modalService.open(
+      BasicModalContentComponent,
+      { ariaLabelledBy: 'Modal Title' },
+    );
   }
 }

libs/design/modal/src/modal/modal-config.ts

@@ -4,4 +4,7 @@ export interface DaffModalConfiguration {
    * DaffModalComponent is interacted with.
    */
   onBackdropClicked?: () => void;
+
+  /** Sets the `aria-labelledby` property on the modal */
+  ariaLabelledBy?: string;
 }

libs/design/modal/src/service/modal.service.ts

@@ -79,6 +79,10 @@ export class DaffModalService {
 	  const _modal = this._attachModal(_ref);
 	  const _attachedModal = this._attachModalContent(component, _modal);
 
+    if(configuration?.ariaLabelledBy) {
+      _modal.instance.ariaLabelledBy = configuration.ariaLabelledBy;
+    }
+
 	  const modal: DaffModal = {
 	    modal: _modal,
 	    overlay: _ref,