@watermarkinsights/ripple 5.19.0-alpha.1 → 5.19.0-alpha.11

package/dist/cjs/wm-snackbar.cjs.entry.js

@@ -44,24 +44,20 @@ const Snackbar = class {
         this.resetUpdatedNotifications(prevParsedNotifications);
         if (prevParsedNotifications.length < this.parsedNotifications.length) {
             const latestNotification = this.parsedNotifications[0];
+            // don't announce link if user is tabbing because link is focused after announcement
+            this.announce(`${latestNotification.message} ${this.isTabbing ? "" : latestNotification.link}`);
             if (!latestNotification.link) {
                 const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
                 this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
             }
-            else {
-                if (this.isTabbing) {
-                    this.focusOnDismiss = document.activeElement ? document.activeElement : null;
-                    this.stopTimer(latestNotification);
-                    // allow snack to render before focusing
-                    window.setTimeout(() => {
-                        const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
-                        link.focus();
-                    });
-                }
-                else {
-                    // don't announce link if user is tabbing because link is focused after announcement
-                    !this.isTabbing && this.announce(`${latestNotification.message} ${latestNotification.link}`);
-                }
+            else if (this.isTabbing) {
+                this.focusOnDismiss = document.activeElement ? document.activeElement : null;
+                this.stopTimer(latestNotification);
+                // allow snack to render before focusing
+                window.requestAnimationFrame(() => {
+                    const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
+                    link.focus();
+                });
             }
         }
     }
@@ -160,11 +156,11 @@ const Snackbar = class {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && index.h("div", { class: "svg-icon svg-open-in-new" })))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onMouseLeave: () => functions.hideTooltip(), onFocus: (ev) => this.isTabbing && functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onBlur: () => functions.hideTooltip() }, index.h("div", { class: "svg-icon svg-close" }))), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (index.h(index.Host, { key: '2b062c8a3acb61667fee361512d91b9e08c27a07' }, index.h("div", { key: 'c4643e64a3e706732dd2b44d94938c73ee7914cb', ref: (el) => (this.snackAreaEl = el), class: {
+        return (index.h(index.Host, { key: '01264c3db9744e9b71b6c8cc05c9c80f3c8086c4' }, index.h("div", { key: '0e49a6805c3f36589077c8685c58ef2e75196a6a', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), index.h("div", { key: 'd886c23167016f1ea92da9edd75b1b8ffbafe098', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), index.h("div", { key: '9c4ea98f1ce40e18e82ef66684bd3d7481343a36', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {