From b9b786a7d51830867ad1c7f087c6fe454a835341 Mon Sep 17 00:00:00 2001
From: Elizabeth Samuel <elizs@microsoft.com>
Date: Fri, 31 Jan 2025 10:32:51 -0800
Subject: [PATCH] [all hosts] Use kbd in HTML and js files (#929)

* [all hosts] Use kbd in HTML and js files

* Apply suggestions from code review

Co-authored-by: Sam Ramon <15154970+samantharamon@users.noreply.github.com>

---------

Co-authored-by: Sam Ramon <15154970+samantharamon@users.noreply.github.com>
---
 Samples/office-keyboard-shortcuts/src/taskpane.html       | 8 ++++----
 .../src/taskpane/taskpane.js                              | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Samples/office-keyboard-shortcuts/src/taskpane.html b/Samples/office-keyboard-shortcuts/src/taskpane.html
index 9fdaffae7..e96c11538 100644
--- a/Samples/office-keyboard-shortcuts/src/taskpane.html
+++ b/Samples/office-keyboard-shortcuts/src/taskpane.html
@@ -39,14 +39,14 @@ <h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
             <p class="ms-font-m"> Try the following keyboard shortcuts.</p>
             <ul class="ms-List ms-welcome__features">
                 <li class="ms-ListItem">
-                    <span class="ms-font-m"><b>Ctrl+Alt+Up arrow key</b>: Open the add-in's task pane.</span>
+                    <span class="ms-font-m"><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Up arrow key</kbd>: Open the add-in's task pane.</span>
                 </li>
                 <li class="ms-ListItem">
-                    <span class="ms-font-m"><b>Ctrl+Alt+Down arrow key</b>: Hide the add-in's task pane.</span>
+                    <span class="ms-font-m"><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Down arrow key</kbd>: Hide the add-in's task pane.</span>
                 </li>
                 <li class="ms-ListItem">
                     <span class="ms-font-m">
-                        <b>Ctrl+Alt+Q</b>: Run an action that's specific to the current Office host.
+                        <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Q</kbd>: Run an action that's specific to the current Office host.
                         In Excel, this shortcut cycles through colors in the currently selected cell.
                         In Word, this shortcut adds text to the document.
                     </span>
@@ -57,7 +57,7 @@ <h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
                 If a custom shortcut conflicts with an existing shortcut that's defined in the host application or in another add-in, a dialog will be shown.
                 This dialog will ask you to confirm which action you want to be mapped to the keyboard shortcut.
             </p>
-            <p class="ms-font-m">To test this now, press <b>Ctrl+R</b>.</p>
+            <p class="ms-font-m">To test this now, press <kbd>Ctrl</kbd>+<kbd>R</kbd>.</p>
             <p class="ms-font-m">After you select an action, you can change your preference by invoking <b>Reset Office Add-in Shortcut Preferences</b> from the search field.</p>
         </div>
     </main>
diff --git a/Samples/outlook-check-item-categories/src/taskpane/taskpane.js b/Samples/outlook-check-item-categories/src/taskpane/taskpane.js
index 13c2a4c43..109fe1c83 100644
--- a/Samples/outlook-check-item-categories/src/taskpane/taskpane.js
+++ b/Samples/outlook-check-item-categories/src/taskpane/taskpane.js
@@ -34,7 +34,7 @@ function getCategories() {
     selection.multiple = true;
     let label = document.createElement("label");
     label.innerHTML =
-      "<br/>Select the applicable categories.<br/><br/>Select and hold <b>Ctrl</b> to choose multiple categories.<br/>";
+      "<br/>Select the applicable categories.<br/><br/>Select and hold <kbd>Ctrl</kbd> to choose multiple categories.<br/>";
     label.htmlFor = "applicable-categories";
 
     asyncResult.value.forEach((category, index) => {