Merge branch 'master' of https://github.com/youda97/carbon-components-angular

Author: youda97

src/modal/modal.component.ts

@@ -1,11 +1,12 @@
 import { ModalService } from "./modal.service";
 import {
+	AfterViewInit,
 	Component,
 	EventEmitter,
 	HostListener,
 	Input,
-	OnInit,
 	OnDestroy,
+	OnInit,
 	Output,
 	ElementRef,
 	ViewChild
@@ -110,7 +111,7 @@ import { cycleTabs } from "./../common/tab.service";
 		])
 	]
 })
-export class ModalComponent implements OnInit, OnDestroy {
+export class ModalComponent implements AfterViewInit, OnInit, OnDestroy {
 	/**
 	 * Size of the modal to display.
 	 * (size `"default"` is being deprecated as of neutrino v1.2.0, please use `"md"` instead)
@@ -148,6 +149,12 @@ export class ModalComponent implements OnInit, OnDestroy {
 	 */
 	modalState = "out";
 
+	/**
+	 * An element should have 'data-modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.
+	 * @memberof ModalComponent
+	 */
+	selectorPrimaryFocus = "[modal-primary-focus]";
+
 	/**
 	 * Creates an instance of `ModalComponent`.
 	 * @param {ModalService} modalService
@@ -156,11 +163,23 @@ export class ModalComponent implements OnInit, OnDestroy {
 	constructor(public modalService: ModalService) {}
 
 	/**
-	 * Set document focus to be on the modal component when it is initialized.
+	 * Set modalState on the modal component when it is initialized.
 	 * @memberof ModalComponent
 	 */
 	ngOnInit() {
 		this.modalState = "in";
+	}
+
+	/**
+	 * Set document focus to be on the modal component after it is initialized.
+	 * @memberof ModalComponent
+	 */
+	ngAfterViewInit() {
+		const primaryFocusElement = this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);
+		if (primaryFocusElement && primaryFocusElement.focus) {
+			primaryFocusElement.focus();
+			return;
+		}
 		this.modal.nativeElement.focus();
 	}
 

src/modal/modal.stories.ts

@@ -19,7 +19,7 @@ import { Modal, ModalService } from "../";
 				<p class="bx--modal-content__text">{{modalText}}</p>
 			</section>
 			<ibm-modal-footer>
-				<button class="bx--btn bx--btn--primary" (click)="closeModal()">Close</button>
+				<button class="bx--btn bx--btn--primary" modal-primary-focus (click)="closeModal()">Close</button>
 			</ibm-modal-footer>
 		</ibm-modal>
 	`