From 5d21c6f2b19cdb73d5183046c9d1319794d8eed4 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 16 Sep 2020 12:06:39 -0400 Subject: [PATCH] Fixes --- src/components.d.ts | 4 ++-- src/components/alert/alert.light-dom.scss | 2 ++ src/components/alert/alert.tsx | 7 ++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index ec1580e01..6cad59e28 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -28,7 +28,7 @@ export namespace Components { */ "show": () => Promise; /** - * When true, the alert will be shown as a "toast" notification. In this case, the alert will be hoisted to a stack and removed from the DOM when closed. By storing a reference to the alert element, you can reuse it by calling `alert.show()` even after it's removed from the DOM. + * When true, the alert will be shown as a "toast" notification. In this case, the alert will be hoisted to a stack and removed from the DOM when closed. By storing a reference to the alert, you can reuse it by calling `alert.show()` even after it has been removed from the DOM. */ "toast": boolean; /** @@ -1451,7 +1451,7 @@ declare namespace LocalJSX { */ "open"?: boolean; /** - * When true, the alert will be shown as a "toast" notification. In this case, the alert will be hoisted to a stack and removed from the DOM when closed. By storing a reference to the alert element, you can reuse it by calling `alert.show()` even after it's removed from the DOM. + * When true, the alert will be shown as a "toast" notification. In this case, the alert will be hoisted to a stack and removed from the DOM when closed. By storing a reference to the alert, you can reuse it by calling `alert.show()` even after it has been removed from the DOM. */ "toast"?: boolean; /** diff --git a/src/components/alert/alert.light-dom.scss b/src/components/alert/alert.light-dom.scss index 8f4a88c98..24b1bf698 100644 --- a/src/components/alert/alert.light-dom.scss +++ b/src/components/alert/alert.light-dom.scss @@ -1,4 +1,6 @@ .sl-toast-stack { + display: flex; + flex-direction: column; position: fixed; top: 0; right: 0; diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx index ebc667093..a23fd33b4 100644 --- a/src/components/alert/alert.tsx +++ b/src/components/alert/alert.tsx @@ -14,7 +14,6 @@ import { Component, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } */ const stack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' }); -stack.dataset.placement = 'top'; @Component({ tag: 'sl-alert', @@ -39,8 +38,8 @@ export class Alert { /** * When true, the alert will be shown as a "toast" notification. In this case, the alert will be hoisted to a stack - * and removed from the DOM when closed. By storing a reference to the alert element, you can reuse it by calling - * `alert.show()` even after it's removed from the DOM. + * and removed from the DOM when closed. By storing a reference to the alert, you can reuse it by calling + * `alert.show()` even after it has been removed from the DOM. */ @Prop() toast = false; @@ -203,6 +202,8 @@ export class Alert { 'alert--danger': this.type === 'danger' }} role="alert" + aria-live="assertive" + aria-atomic="true" aria-hidden={!this.open} onMouseMove={this.handleMouseMove} onTransitionEnd={this.handleTransitionEnd}