[Designer] Add alerts for narrator (#8617)

* Add alerts for narrator

* Use aria-live for each alert

Author: anna-dingler

source/nodejs/adaptivecards-designer/src/adaptivecards-designer.css

@@ -1718,3 +1718,16 @@ a.default-ac-anchor:visited:active {
         visibility: hidden;
     }
 }
+
+.screen-reader-only {
+    border: 0;
+    clip: rect(0,0,0,0);
+    clip-path: inset(50%);
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+}

source/nodejs/adaptivecards-designer/src/card-designer.ts

@@ -1525,7 +1525,11 @@ export class CardDesigner extends Designer.DesignContext {
                     text: (trigger) => JSON.stringify(this.getBoundCard(), null, 4)
                 })
                 .on("error", () => this._copyJSONButton.renderedElement.focus())
-                .on("success", () => this._copyJSONButton.renderedElement.focus());
+                .on("success", () => {
+                    this._copyJSONButton.renderedElement.focus()
+
+                    this.toolbar.addAlert("Card payload copied");
+                });
         }
 
         // Tool palette panel

source/nodejs/adaptivecards-designer/src/toolbar.ts

@@ -334,6 +334,7 @@ export class ToolbarChoicePicker extends ToolbarElement {
 export class Toolbar {
     private _elements: Array<ToolbarElement> = [];
     private _attachedTo: HTMLElement;
+    private _alertPanel: HTMLDivElement;
 
     private createSeparatorElement(): HTMLElement {
         let separatorElement = document.createElement("div");
@@ -395,6 +396,10 @@ export class Toolbar {
 
         this._attachedTo.appendChild(leftContainer);
         this._attachedTo.appendChild(rightContainer);
+
+        this._alertPanel = document.createElement("div");
+        this._alertPanel.className = "screen-reader-only";
+        this._attachedTo.appendChild(this._alertPanel);
     }
 
     addElement(element: ToolbarElement) {
@@ -438,4 +443,11 @@ export class Toolbar {
         // specified id
         this._elements.splice(0, 0, element);
     }
+
+    addAlert(alertText: string) {
+        var alert = document.createElement('div');
+        alert.innerHTML = alertText;
+        alert.setAttribute("aria-live", "polite");
+        this._alertPanel.appendChild(alert);
+    }
 }