diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-notification-container/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-notification-container/backoffice-notification-container.element.ts
index 1e4485749145..9608587decc7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-notification-container/backoffice-notification-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-notification-container/backoffice-notification-container.element.ts
@@ -10,6 +10,8 @@ export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
@query('#notifications')
private _notificationsElement?: HTMLElement;
+ @query('#sr-live') private _srLive?: HTMLDivElement;
+
@state()
private _notifications?: UmbNotificationHandler[];
@@ -29,7 +31,6 @@ export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
this.observe(this._notificationContext.notifications, (notifications) => {
this._notifications = notifications;
-
// Close and instantly open the popover again to make sure it stays on top of all other content on the page
// TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -39,9 +40,33 @@ export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this._notificationsElement?.showPopover?.(); // To prevent issues in FireFox I added `?.` before `()` [NL]
+
+ //Announce the newest notification
+ this._announceNewest(this._notifications);
});
}
+ private _getNotificationText(notificatonData: UmbNotificationHandler): string {
+ //Trick to be able to access to the data(notification messagge) inside a private propertity
+ const data = (notificatonData as any)._data ?? {};
+ const notificationText = data.message ?? '';
+ return notificationText;
+ }
+
+ private _announce(message: string) {
+ if (!this._srLive) return;
+ this._srLive.textContent = 'u00A0'; //to avoid same text suppression
+ setTimeout(() => {
+ this._srLive!.textContent = message || '';
+ }, 0);
+ }
+
+ private _announceNewest(list?: UmbNotificationHandler[]) {
+ const newest = list?.[list.length - 1];
+ if (!newest) return;
+ this._announce(this._getNotificationText(newest));
+ }
+
override render() {
return html`