fix(modal): use modal id for dialog aria-labelledby attribute by default

vmware-clarity · May 28, 2024 · 7d8c34b · 7d8c34b
1 parent ec04af7
commit 7d8c34b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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);
  });