Add a caption to the table present in the 'help' dialog (#7149)

* move keyboard shortcut text to caption * use innerText instead
microsoft · Apr 14, 2022 · 8adf7ce · 8adf7ce
1 parent cf19264
commit 8adf7ce
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/source/nodejs/adaptivecards-designer/src/help-dialog.ts b/source/nodejs/adaptivecards-designer/src/help-dialog.ts
@@ -34,12 +34,14 @@ export class HelpDialog extends Dialog {
         keyboardHeading.innerText = "Keyboard Shortcuts";
         this._renderedElement.appendChild(keyboardHeading);
 
-        let keyboardText = document.createElement("div");
-        keyboardText.innerText = "These keyboard shortcuts only work when the keyboard focus is within either the card payload or sample data editors";
-        this._renderedElement.appendChild(keyboardText);
-        this._renderedElement.appendChild(document.createElement("br"));
-
         let shortcutTable = document.createElement("table");
+
+        let tableCaption = shortcutTable.createCaption();
+        tableCaption.style.textAlign = "left";
+        tableCaption.innerText = "These keyboard shortcuts only work when the keyboard focus is within either the card payload or sample data editors";
+
+        shortcutTable.appendChild(document.createElement("br"));
+
         shortcutTable.appendChild(this._getShortcutRow("Shortcut", "Description", true));
         shortcutTable.appendChild(this._getShortcutRow("Alt-F1", "Show help dialog for editor"));
         shortcutTable.appendChild(this._getShortcutRow("Ctrl-M", "Toggle behavior of TAB key. By default, pressing TAB will insert a TAB character. When toggled, pressing TAB will navigate to the next focusable item."));