diff --git a/README.md b/README.md index 44210baf..41e718b3 100644 --- a/README.md +++ b/README.md @@ -237,7 +237,9 @@ export interface ActiveToast { Put toasts in a specific div inside your application. This should probably be somewhere that doesn't get deleted. Add `ToastContainerModule` to the ngModule -where you need the directive available. +where you need the directive available. Make sure that your container has +an `aria-live="polite"` attribute, so that any time a toast is injected into +the container it is announced by screen readers. ```typescript import { BrowserModule } from '@angular/platform-browser'; @@ -274,7 +276,7 @@ import { ToastContainerDirective, ToastrService } from 'ngx-toastr'; selector: 'app-root', template: `

Click

-
+
`, }) export class AppComponent implements OnInit { diff --git a/src/app/bootstrap.toast.ts b/src/app/bootstrap.toast.ts index 68701f62..a9b337b8 100644 --- a/src/app/bootstrap.toast.ts +++ b/src/app/bootstrap.toast.ts @@ -19,7 +19,6 @@ import { Toast, ToastrService, ToastPackage } from '../lib/public_api';
{{ message || 'default message' }} diff --git a/src/app/pink.toast.ts b/src/app/pink.toast.ts index 1085d3ec..3f2dd7d6 100644 --- a/src/app/pink.toast.ts +++ b/src/app/pink.toast.ts @@ -36,10 +36,10 @@ import { Toast, ToastrService, ToastPackage } from '../lib/public_api';
{{ title }}
-
-
{{ message }}
diff --git a/src/lib/overlay/overlay-container.ts b/src/lib/overlay/overlay-container.ts index c2fc54df..54b0f5b8 100644 --- a/src/lib/overlay/overlay-container.ts +++ b/src/lib/overlay/overlay-container.ts @@ -29,11 +29,13 @@ export class OverlayContainer implements OnDestroy { /** * Create the overlay container element, which is simply a div - * with the 'cdk-overlay-container' class on the document body. + * with the 'cdk-overlay-container' class on the document body + * and 'aria-live="polite"' */ protected _createContainer(): void { const container = this._document.createElement('div'); container.classList.add('overlay-container'); + container.setAttribute('aria-live','polite'); this._document.body.appendChild(container); this._containerElement = container; } diff --git a/src/lib/toastr/toast-noanimation.component.ts b/src/lib/toastr/toast-noanimation.component.ts index 0e6e24ee..e6aaab4e 100644 --- a/src/lib/toastr/toast-noanimation.component.ts +++ b/src/lib/toastr/toast-noanimation.component.ts @@ -29,10 +29,10 @@ import { ToastrService } from './toastr.service';
{{ title }} [{{ duplicatesCount + 1 }}]
-
-
{{ message }}
diff --git a/src/lib/toastr/toast.component.ts b/src/lib/toastr/toast.component.ts index 225cdc95..03cc7eac 100644 --- a/src/lib/toastr/toast.component.ts +++ b/src/lib/toastr/toast.component.ts @@ -25,10 +25,10 @@ import { ToastrService } from './toastr.service';
{{ title }} [{{ duplicatesCount + 1 }}]
-
-
{{ message }}