From 7d8c34bd6772a5e7160ad963c033af099367770b Mon Sep 17 00:00:00 2001
From: Kevin Buhmann <kbuhmann@vmware.com>
Date: Tue, 28 May 2024 09:54:20 -0500
Subject: [PATCH] fix(modal): use modal id for dialog aria-labelledby attribute
 by default

---
 projects/angular/src/modal/modal.html    |  2 +-
 projects/angular/src/modal/modal.spec.ts | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/projects/angular/src/modal/modal.html b/projects/angular/src/modal/modal.html
index 359d306dc2..904a3f3367 100644
--- a/projects/angular/src/modal/modal.html
+++ b/projects/angular/src/modal/modal.html
@@ -19,7 +19,7 @@
     role="dialog"
     aria-modal="true"
     [attr.aria-hidden]="!_open"
-    [attr.aria-labelledby]="labelledBy"
+    [attr.aria-labelledby]="labelledBy || modalId"
   >
     <div class="clr-sr-only">{{commonStrings.keys.modalContentStart}}</div>
     <div class="modal-content-wrapper">
diff --git a/projects/angular/src/modal/modal.spec.ts b/projects/angular/src/modal/modal.spec.ts
index f1937286a6..7376c748de 100644
--- a/projects/angular/src/modal/modal.spec.ts
+++ b/projects/angular/src/modal/modal.spec.ts
@@ -276,10 +276,29 @@ describe('Modal', () => {
     expect(compiled.querySelector('.close').getAttribute('aria-label')).toBe('custom close label');
   });
 
-  it('should add expected aria-labelledby', () => {
-    // open modal
+  it('should use modal id for aria-labelledby by default', () => {
+    modal.open();
+    fixture.detectChanges();
+
+    expect(compiled.querySelector('.modal-dialog').getAttribute('aria-labelledby')).toBe(modal.modalId);
+  });
+
+  it('should allow a custom aria-labelledby attribute value', () => {
+    modal.labelledBy = 'custom-id';
+
     modal.open();
     fixture.detectChanges();
+
+    expect(compiled.querySelector('.modal-dialog').getAttribute('aria-labelledby')).toBe('custom-id');
+  });
+
+  it('should fall back to the modal id for the aria-labelledby attribute value', () => {
+    // set to a falsy value
+    modal.labelledBy = '';
+
+    modal.open();
+    fixture.detectChanges();
+
     expect(compiled.querySelector('.modal-dialog').getAttribute('aria-labelledby')).toBe(modal.modalId);
   });