fix(modal): fall back to modal id for dialog aria-labelledby attrib…

…ute (#1403)

## What is the current behavior?

If you set `[clrModalLabelledById]` to an empty string, the
`aria-labelledby` attribute of the modal dialog element is set to an
empty value.

This behavior can be seen in the modal stories since the input is
defaulted to an empty string. We can't default it to the modal id
because that is not known until the component is instantiated.

Issue Number: CDE-2050

## What is the new behavior?

If you set `[clrModalLabelledById]` to an empty string, the
`aria-labelledby` attribute of the modal dialog element is set to the
modal id.

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">

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);
  });
 

projects/angular/src/modal/modal.ts

@@ -53,7 +53,7 @@ export class ClrModal implements OnChanges, OnDestroy {
  @Input('clrModalPreventClose') stopClose = false;
  @Output('clrModalAlternateClose') altClose = new EventEmitter<boolean>(false);
 
- @Input('clrModalLabelledById') labelledBy = this.modalId;
+ @Input('clrModalLabelledById') labelledBy: string;
 
  // presently this is only used by inline wizards
  @Input('clrModalOverrideScrollService') bypassScrollService = false;