Resolve amp violation for download modal (#532)

Author: Bibek-Regmi

src/ui-kit/components/modal/modal.component.ts

@@ -76,6 +76,11 @@ export class SamModalComponent implements OnInit {
    */
   @Input() condensed: boolean = false;
 
+  /**
+   * Defines aria level for modal title
+   */
+  @Input() headerLevel: number;
+
   /**
    * (deprecated) Emitted event when modal is opened
    */

src/ui-kit/components/modal/modal.template.html

@@ -1,6 +1,6 @@
 <div *ngIf="show" class="modal-backdrop"></div>
 <div aria-live="assertive" aria-modal="true" #modalRoot *ngIf="show" [attr.id]="id" role="dialog" [class]="condensed ? 'modal-dialog-condensed modal-dialog' :'modal-dialog'"
-	 (keydown)="closeEscape($event)" aria-labelledby="dialog-title" aria-describedby="dialog-description">
+	 (keydown)="closeEscape($event)" [attr.aria-labelledby]="id + '-dialog-title'" [attr.aria-describedby]="id + '-dialog-description'">
 	<div #modalContent class="modal-content" tabindex="-1" sam-click-outside (clickOutside)="closeOnOutsideClick && clickOutsideReady ? closeModal() : 0">
 		<div *ngIf="this.type !== 'primary'" class="usa-alert {{this.types[type].class}}">
 			<div [class]="((this.type == 'plain') && (condensed))? 'usa-alert-body plain-alert-body' : 'usa-alert-body'">
@@ -9,7 +9,10 @@
 						class="usa-sr-only">close
 						modal</span></button>
 				<span *ngIf="this.types[type].sr" class="sr-only">{{this.types[type].sr}}</span>
-				<h3 id="dialog-title" class="usa-alert-heading">{{title}}</h3>
+				<h3 *ngIf="!headerLevel" [attr.id]="id + '-dialog-title'" class="usa-alert-heading" >{{title}}</h3>
+				<div *ngIf="headerLevel" [attr.id]="id + '-dialog-title'" class="usa-alert-heading" 
+					role="heading" [attr.aria-level]="headerLevel">{{title}}
+				</div>
 			</div>
 		</div>
 		<div *ngIf="this.type === 'primary'" class="primary-model-body">
@@ -20,11 +23,12 @@ <h3 id="dialog-title" class="usa-alert-heading">{{title}}</h3>
 				<ng-container *ngIf="icon">
 					<sam-icon [icon]="icon" size="2x"></sam-icon>
 				</ng-container>
-				<h3 id="dialog-title">{{title}}</h3>
+				<h3 *ngIf="!headerLevel" [attr.id]="id + '-dialog-title'">{{title}}</h3>
+				<div *ngIf="headerLevel" [attr.id]="id + '-dialog-title'" role="heading" [attr.aria-level]="headerLevel">{{title}}</div>
 			</div>
 		</div>
 		<div class="modal-body">
-			<p id="dialog-description" *ngIf="description">{{description}}</p>
+			<p [attr.id]="id + '-dialog-description'" *ngIf="description">{{description}}</p>
 			<ng-content></ng-content>
 			<div *ngIf="cancelButtonLabel || submitButtonLabel" [ngClass]="(buttonPosition=='left') ? 'text-left' : ((buttonPosition=='right') ? 'text-right' : 'text-center')">
 				<sam-button buttonType="tertiary" class="usa-button-outline usa-modal-content-cancel-btn"