[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 <[email protected]> --------- Co-authored-by: Sam Ramon <[email protected]>
OfficeDev · Jan 31, 2025 · b9b786a · b9b786a
1 parent d43ead6
commit b9b786a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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) => {