Fixed accessibility issue with widget selection announcement.

Author: azaslonov

src/core.design.module.ts

@@ -110,6 +110,7 @@ import { ContentPart } from "./content-part/ko";
 import { UrlDesignModule } from "./workshops/urls/ko/url.design.module";
 import { PopupDesignModule } from "./popup/popup.design.module";
 import { ContainerEditorModule } from "./container/container.design.module";
+import { LiveAreaBindingHandler } from "./ko/bindingHandlers/bindingHandlers.livearea";
 
 
 export class CoreDesignModule implements IInjectorModule {
@@ -265,6 +266,7 @@ export class CoreDesignModule implements IInjectorModule {
         injector.bindToCollection("autostart", Hinter);
         injector.bindToCollection("autostart", WidgetBindingHandler);
         injector.bindToCollection("autostart", BackgroundBindingHandler);
+        injector.bindToCollection("autostart", LiveAreaBindingHandler);
 
         injector.bindInstance("reservedPermalinks", ["/", "/404", "/500"]);
         injector.resolve("workshopSections");

src/grid/ko/gridEditor.ts

@@ -29,6 +29,7 @@ export class GridEditor {
     private ownerDocument: Document;
     private selection: GridItem;
     private activeLayer: string;
+    private noificationTimeout: any;
 
     constructor(
         private readonly viewManager: ViewManager,
@@ -386,6 +387,17 @@ export class GridEditor {
             throw new Error(`Parameter "item" not specified.`);
         }
 
+        this.eventManager.dispatchEvent(Events.NotificationRequest, item.displayName);
+
+        if (this.noificationTimeout) {
+            clearTimeout(this.noificationTimeout);
+        }
+
+        this.noificationTimeout = setTimeout(() => {
+            this.eventManager.dispatchEvent(Events.NotificationRequest, "selected");
+        }, 1000);
+
+
         const commandSet = item?.getContextCommands();
 
         if (!commandSet) {

src/ko/bindingHandlers/bindingHandlers.livearea.ts

@@ -0,0 +1,22 @@
+import { EventManager, Events } from "@paperbits/common/events";
+import * as ko from "knockout";
+
+
+export class LiveAreaBindingHandler {
+    constructor(eventManager: EventManager) {
+        ko.bindingHandlers["livearea"] = {
+            init: (element: HTMLElement, valueAccessor: () => (data: unknown) => void, allBindings, viewModel) => {
+                const notificationHandler = (notification: string) => {
+                    element.innerText = notification;
+                }
+
+                eventManager.addEventListener(Events.NotificationRequest, notificationHandler);
+
+                ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+                    eventManager.removeEventListener(Events.NotificationRequest, notificationHandler);
+                })
+            }
+        };
+    }
+}
+

src/ko/ui/defaultViewManager.html

@@ -1,4 +1,5 @@
 <!-- ko if: host -->
+<div aria-live="assertive" data-bind="livearea: {}"></div>
 <div id="contentEditor" class="viewport" tabindex="0"
     data-bind="host: { viewport: viewport, host: host, block: block, onDocumentCreated: onHostDocumentCreated, onDocumentDisposed: onHostDocumentDisposed  }"></div>
 <!-- /ko -->