updated for the remaining PR comments

skyux-spa-visual-tests/src/app/toast/toast-demo.component.ts

@@ -15,5 +15,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToastDemoComponent {
-  constructor(public message: SkyToastInstance) {}
+  constructor(
+    public message: SkyToastInstance
+  ) {}
 }

src/demos/demo.service.ts

@@ -1031,6 +1031,16 @@ export class SkyDemoService {
           fileContents: require('!!raw-loader!./toast/toast-demo.component.ts'),
           componentName: 'SkyToastDemoComponent',
           bootstrapSelector: 'sky-toast-demo'
+        },
+        {
+          name: 'toast-custom-demo.component.html',
+          fileContents: require('!!raw-loader!./toast/toast-custom-demo.component.html')
+        },
+        {
+          name: 'toast-custom-demo.component.ts',
+          fileContents: require('!!raw-loader!./toast/toast-custom-demo.component.ts'),
+          componentName: 'SkyToastCustomDemoComponent',
+          bootstrapSelector: 'sky-toast-custom-demo'
         }
       ]
     },

src/demos/toast/toast-custom-demo.component.ts

@@ -16,7 +16,9 @@ import {
 export class SkyToastCustomDemoComponent implements OnInit {
   public text = 'This is a templated message. It can even link you to ';
 
-  constructor(public message: SkyToastInstance) {}
+  constructor(
+    public message: SkyToastInstance
+  ) {}
 
   public ngOnInit() {
     this.message.isClosing.subscribe(() => {

src/demos/toast/toast-demo.component.ts

@@ -1,6 +1,5 @@
 import {
-  Component,
-  ChangeDetectionStrategy
+  Component
 } from '@angular/core';
 
 import {
@@ -14,15 +13,16 @@ import {
 
 @Component({
   selector: 'sky-toast-demo',
-  templateUrl: './toast-demo.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  templateUrl: './toast-demo.component.html'
 })
 export class SkyToastDemoComponent {
   public selectedType = SkyToastType.Info;
   public typeTranslator = SkyToastType;
   public types = [SkyToastType.Info, SkyToastType.Success, SkyToastType.Warning, SkyToastType.Danger];
 
-  constructor(private toastSvc: SkyToastService) { }
+  constructor(
+    private toastSvc: SkyToastService
+  ) {}
 
   public openMessage() {
     this.toastSvc.openMessage('This is a ' + SkyToastType[this.selectedType] + ' toast.', {toastType: this.selectedType});

src/locales/resources_en_US.json

@@ -835,7 +835,7 @@
     "_description": "The close button for the timepicker modal",
     "message": "Done"
   },
-  "toast_close": {
+  "toast_close_button": {
     "_description": "Screen reader text for the close button on toasts",
     "message": "Close the toast"
   },

src/modules/toast/services/toast.service.ts

@@ -40,20 +40,20 @@ export class SkyToastService implements OnDestroy {
     private adapter: SkyToastAdapterService
   ) {}
 
-  public openMessage(message: string, config: SkyToastConfig = {}) {
+  public openMessage(message: string, config: SkyToastConfig = {}): SkyToastInstance {
     config.message = message;
     config.customComponentType = undefined;
     return this.open(config);
   }
 
-  public openTemplatedMessage(customComponentType: Type<any>, config: SkyToastConfig = {}, providers?: Provider[]) {
+  public openTemplatedMessage(customComponentType: Type<any>, config: SkyToastConfig = {}, providers?: Provider[]): SkyToastInstance {
     config.customComponentType = customComponentType;
     config.providers = providers || config.providers;
     config.message = undefined;
     return this.open(config);
   }
 
-  public open(config: SkyToastConfig) {
+  public open(config: SkyToastConfig): SkyToastInstance {
     if (!this.host) {
       this.host = this.createHostComponent();
     }

src/modules/toast/toast-container.component.html

@@ -1,5 +1,4 @@
 <div
-  role="alert"
   class="sky-toaster">
   <sky-toast
     *ngFor="let message of messages | async"

src/modules/toast/toast-container.component.ts

@@ -22,7 +22,9 @@ export class SkyToastContainerComponent implements OnInit {
 
   public messages: Observable<any>;
 
-  constructor(private toast: SkyToastService) { }
+  constructor(
+    private toast: SkyToastService
+  ) {}
 
   public ngOnInit() {
     this.messages = this.toast.messages;

src/modules/toast/toast-messages/toast.component.html

@@ -4,7 +4,8 @@
   <div
     class="sky-toast"
     [ngClass]="'sky-toast-' + message.toastType"
-    [attr.aria-live]="message.toastType==='danger' ? 'assertive' : 'polite'">
+    [attr.aria-live]="message.toastType==='danger' ? 'assertive' : 'polite'"
+    [attr.role]="message.toastType==='danger' ? 'alert' : undefined">
     <div
       class="sky-toast-content">
       <p

src/modules/toast/toast-messages/toast.component.scss

@@ -21,13 +21,13 @@
     padding-bottom: $sky-padding;
     width: 100%;
 
-		::ng-deep a {
-			color: change-color($sky-text-color-default, $alpha: 0.8);
-			text-decoration: underline;
+    ::ng-deep a {
+      color: change-color($sky-text-color-default, $alpha: 0.8);
+      text-decoration: underline;
 
-			&:hover {
-				color: $sky-text-color-default;
-			}
+      &:hover {
+        color: $sky-text-color-default;
+      }
     }
 
     .sky-toast-content-message {

src/modules/toast/toast-messages/toast.component.ts

@@ -78,10 +78,10 @@ export class SkyToastComponent implements OnInit, OnDestroy {
       useValue: this.message
     });
 
-    let componentFactory = this.resolver.resolveComponentFactory(this.message.customComponentType);
-    let providers = ReflectiveInjector.resolve(this.message.providers || []);
+    const componentFactory = this.resolver.resolveComponentFactory(this.message.customComponentType);
+    const providers = ReflectiveInjector.resolve(this.message.providers || []);
 
-    let injector = ReflectiveInjector.fromResolvedProviders(providers, this.injector);
+    const injector = ReflectiveInjector.fromResolvedProviders(providers, this.injector);
 
     this.customComponent = this.customToastHost.createComponent(componentFactory, undefined, injector);
     this.customComponent.instance.message = this.message;