All Pages: Use multiple kbd elements for commands with multiple keys …

…(pull #3093)

The `kbd` element was not being used correctly. When a single keyboard command required multiple keys, the markup had multiple keys inside a single `kbd` element, e.g., `<kbd>Shift + Tab</kbd>` instead of the correct syntax, which is `<kbd>Shift</kbd> + <kbd>Tab</kbd>`

This commit fixes that. It:
* Change kbd elements that include 2 keys into 2 kbd elements.
* Change kbd elements with 3 keys into 3 kbd elements.

content-templates/Example-Template.html

@@ -118,7 +118,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
           Use kbd tags,e.g. <kbd>KeyName</kbd>.
           Key names use first-letter caps, e.g., <kbd>Enter</kbd>.
           Single space between multiple Words, e.g., <kbd>Up Arrow</kbd>.
-          Use + to separate modifiers, e.g., <kbd>Control + Right Arrow</kbd>.
+          Use + to separate modifiers, e.g., <kbd>Control</kbd> + <kbd>Right Arrow</kbd>.
           One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
           Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
         -->

content/patterns/accordion/accordion-pattern.html

@@ -59,7 +59,7 @@ <h2>Keyboard Interaction</h2>
             </ul>
           </li>
           <li><kbd>Tab</kbd>: Moves focus to the next focusable element; all focusable elements in the accordion are included in the page <kbd>Tab</kbd> sequence.</li>
-          <li><kbd>Shift + Tab</kbd>: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page <kbd>Tab</kbd> sequence.</li>
+          <li><kbd>Shift</kbd> + <kbd>Tab</kbd>: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page <kbd>Tab</kbd> sequence.</li>
           <li>
             <kbd>Down Arrow</kbd> (Optional): If focus is on an accordion header, moves focus to the next accordion header.
             If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.

content/patterns/accordion/examples/accordion.html

@@ -175,7 +175,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
               </td>
             </tr>
             <tr data-test-id="key-shift-tab">
-              <th><kbd>Shift + Tab</kbd></th>
+              <th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
               <td>
                 <ul>
                   <li>Moves focus to the previous focusable element.</li>

content/patterns/alertdialog/examples/alertdialog.html

@@ -134,7 +134,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
               </td>
             </tr>
             <tr>
-              <th><kbd>Shift + Tab</kbd></th>
+              <th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
               <td>
                 <ul>
                   <li>Moves focus to previous focusable element inside the dialog.</li>
@@ -147,11 +147,11 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <td>Closes the dialog.</td>
             </tr>
             <tr>
-              <th><kbd>Command + S</kbd></th>
+              <th><kbd>Command</kbd> + <kbd>S</kbd></th>
               <td>(Mac only) Save the contents of the notes <code>textarea</code> when focused.</td>
             </tr>
             <tr data-test-id="key-control-s">
-              <th><kbd>Control + S</kbd></th>
+              <th><kbd>Control</kbd> + <kbd>S</kbd></th>
               <td>(Windows only) Save the contents of the notes <code>textarea</code> when focused.</td>
             </tr>
           </tbody>

content/patterns/button/button-pattern.html

@@ -80,7 +80,7 @@ <h2>Keyboard Interaction</h2>
               <li>If the button action indicates a context change, such as move to next step in a wizard or add another search criteria, then it is often appropriate to move focus to the starting point for that action.</li>
               <li>
                 If the button is activated with a shortcut key, the focus usually remains in the context from which the shortcut key was activated.
-                For example, if <kbd>Alt + U</kbd> were assigned to an &quot;Up&quot; button that moves the currently focused item in a list one position higher in the list, pressing <kbd>Alt + U</kbd> when the focus is in the list would not move the focus from the list.
+                For example, if <kbd>Alt</kbd> + <kbd>U</kbd> were assigned to an &quot;Up&quot; button that moves the currently focused item in a list one position higher in the list, pressing <kbd>Alt</kbd> + <kbd>U</kbd> when the focus is in the list would not move the focus from the list.
               </li>
             </ul>
           </li>

content/patterns/carousel/carousel-pattern.html

@@ -86,7 +86,7 @@ <h2>Keyboard Interaction</h2>
             If the carousel has an auto-rotate feature, automatic slide rotation stops when any element in the carousel receives keyboard focus.
             It does not resume unless the user activates the rotation control.
           </li>
-          <li><kbd>Tab</kbd> and <kbd>Shift + Tab</kbd>: Move focus through the interactive elements of the carousel as specified by the page tab sequence -- scripting for <kbd>Tab</kbd> is not necessary.</li>
+          <li><kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd>: Move focus through the interactive elements of the carousel as specified by the page tab sequence -- scripting for <kbd>Tab</kbd> is not necessary.</li>
           <li>
             Button elements implement the keyboard interaction defined in the <a href="../button/button-pattern.html">button pattern</a>.
             Note: Activating the rotation control, next slide, and previous slide do not move focus, so users may easily repetitively activate them as many times as desired.

content/patterns/combobox/combobox-pattern.html

@@ -148,9 +148,9 @@ <h3>Combobox Keyboard Interaction</h3>
             </ul>
           </li>
           <li>If the combobox is editable, it supports standard single line text editing keys appropriate for the device platform (see note below).</li>
-          <li><kbd>Alt + Down Arrow</kbd> (Optional): If the popup is available but not displayed, displays the popup without moving focus.</li>
+          <li><kbd>Alt</kbd> + <kbd>Down Arrow</kbd> (Optional): If the popup is available but not displayed, displays the popup without moving focus.</li>
           <li>
-            <kbd>Alt + Up Arrow</kbd> (Optional): If the popup is displayed:
+            <kbd>Alt</kbd> + <kbd>Up Arrow</kbd> (Optional): If the popup is displayed:
             <ul>
               <li>If the popup contains focus, returns focus to the combobox.</li>
               <li>Closes the popup.</li>
@@ -270,8 +270,8 @@ <h3>Grid Popup Keyboard Interaction</h3>
               <li>If the combobox is editable, returns focus to the combobox and places the cursor after the last character.</li>
             </ul>
           </li>
-          <li><kbd>Control + Home</kbd> (optional): moves focus to the first row.</li>
-          <li><kbd>Control + End</kbd> (Optional): moves focus to the last row.</li>
+          <li><kbd>Control</kbd> + <kbd>Home</kbd> (optional): moves focus to the first row.</li>
+          <li><kbd>Control</kbd> + <kbd>End</kbd> (Optional): moves focus to the last row.</li>
           <li>Any printable character: If the combobox is editable, returns the focus to the combobox without closing the popup and types the character.</li>
           <li><kbd>Backspace</kbd> (Optional): If the combobox is editable, returns focus to the combobox and deletes the character prior to the cursor.</li>
           <li><kbd>Delete</kbd> (Optional): If the combobox is editable, returns focus to the combobox, removes the selected state if a suggestion was selected, and removes the inline autocomplete string if present.</li>

content/patterns/combobox/examples/combobox-autocomplete-both.html

@@ -186,7 +186,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
               </td>
             </tr>
             <tr data-test-id="textbox-key-alt-down-arrow">
-              <th><kbd>Alt + Down Arrow</kbd></th>
+              <th><kbd>Alt</kbd> + <kbd>Down Arrow</kbd></th>
               <td>Opens the listbox without moving focus or changing selection.</td>
             </tr>
             <tr data-test-id="textbox-key-up-arrow">
@@ -221,7 +221,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
               <th>Standard single line text editing keys</th>
               <td>
                 <ul>
-                  <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
+                  <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
                   <li>An HTML <code>input</code> with <code>type="text"</code> is used for the textbox so the browser will provide platform-specific editing keys.</li>
                 </ul>
               </td>

content/patterns/combobox/examples/combobox-autocomplete-list.html

@@ -185,7 +185,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
               </td>
             </tr>
             <tr data-test-id="textbox-key-alt-down-arrow">
-              <th><kbd>Alt + Down Arrow</kbd></th>
+              <th><kbd>Alt</kbd> + <kbd>Down Arrow</kbd></th>
               <td>Opens the listbox without moving focus or changing selection.</td>
             </tr>
             <tr data-test-id="textbox-key-up-arrow">
@@ -215,7 +215,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
               <th>Standard single line text editing keys</th>
               <td>
                 <ul>
-                  <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
+                  <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
                   <li>An HTML <code>input</code> with <code>type="text"</code> is used for the textbox so the browser will provide platform-specific editing keys.</li>
                 </ul>
               </td>

content/patterns/combobox/examples/combobox-autocomplete-none.html

@@ -138,7 +138,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
               </td>
             </tr>
             <tr data-test-id="textbox-key-alt-down-arrow">
-              <th><kbd>Alt + Down Arrow</kbd></th>
+              <th><kbd>Alt</kbd> + <kbd>Down Arrow</kbd></th>
               <td>Opens the listbox without moving focus or changing selection.</td>
             </tr>
             <tr data-test-id="textbox-key-up-arrow">
@@ -158,7 +158,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
               <th>Standard single line text editing keys</th>
               <td>
                 <ul>
-                  <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
+                  <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
                   <li>An HTML <code>input</code> with <code>type="text"</code> is used for the textbox so the browser will provide platform-specific editing keys.</li>
                 </ul>
               </td>

content/patterns/combobox/examples/combobox-datepicker.html

@@ -33,7 +33,7 @@ <h2>About This Example</h2>
         <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below date picker demonstrates an implementation of the <a href="../combobox-pattern.html">Combobox Pattern</a> that opens a dialog.
-          The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing <kbd>Down Arrow</kbd> or <kbd>Alt + Down Arrow</kbd>.
+          The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing <kbd>Down Arrow</kbd> or <kbd>Alt</kbd> + <kbd>Down Arrow</kbd>.
           The dialog contains an implementation of the <a href="../../grid/grid-pattern.html">grid pattern</a> for displaying a calendar and enabling selection of a date.
           Additional buttons in the dialog are available for changing the month and year shown in the grid.
         </p>
@@ -220,7 +220,7 @@ <h3 id="kbd_label_1">Combobox</h3>
             </thead>
             <tbody>
               <tr data-test-id="combobox-down-arrow">
-                <th><kbd>Down Arrow</kbd>,<br><kbd>ALT + Down Arrow</kbd></th>
+                <th><kbd>Down Arrow</kbd>,<br><kbd>ALT</kbd> + <kbd>Down Arrow</kbd></th>
                 <td>
                   <ul>
                     <li>Open the date picker dialog.</li>
@@ -260,7 +260,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
                 </td>
               </tr>
               <tr data-test-id="dialog-shift-tab">
-                <th><kbd>Shift + TAB</kbd></th>
+                <th><kbd>Shift</kbd> + <kbd>TAB</kbd></th>
                 <td>
                   <ul>
                     <li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>

content/patterns/combobox/examples/combobox-select-only.html

@@ -109,7 +109,7 @@ <h3 id="kbd_label_combobox">Closed Combobox</h3>
               </td>
             </tr>
             <tr data-test-id="combobox-key-alt-down-arrow">
-              <th><kbd>Alt + Down Arrow</kbd></th>
+              <th><kbd>Alt</kbd> + <kbd>Down Arrow</kbd></th>
               <td>Opens the listbox without moving focus or changing selection.</td>
             </tr>
             <tr data-test-id="combobox-key-up-arrow">
@@ -226,7 +226,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
               </td>
             </tr>
             <tr data-test-id="listbox-key-alt-up-arrow">
-              <th><kbd>Alt + Up Arrow</kbd></th>
+              <th><kbd>Alt</kbd> + <kbd>Up Arrow</kbd></th>
               <td>
                 <ul>
                   <li>Sets the value to the content of the focused option in the listbox.</li>

content/patterns/combobox/examples/grid-combo.html

@@ -116,7 +116,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
               <th>Standard single line text editing keys</th>
               <td>
                 <ul>
-                  <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
+                  <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
                   <li>
                     An HTML <code>input</code> with <code>type=<q>text</q></code> is used for the textbox so the browser will provide platform-specific editing keys.
                   </li>

content/patterns/dialog-modal/dialog-modal-pattern.html

@@ -26,7 +26,7 @@ <h2>About This Pattern</h2>
         </p>
         <p>
           Like non-modal dialogs, modal dialogs contain their tab sequence.
-          That is, <kbd>Tab</kbd> and <kbd>Shift + Tab</kbd> do not move focus outside the dialog.
+          That is, <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd> do not move focus outside the dialog.
           However, unlike most non-modal dialogs, modal dialogs do not provide means for moving keyboard focus outside the dialog window without closing the dialog.
         </p>
         <p>
@@ -63,7 +63,7 @@ <h2>Keyboard Interaction</h2>
             </ul>
           </li>
           <li>
-            <kbd>Shift + Tab</kbd>:
+            <kbd>Shift</kbd> + <kbd>Tab</kbd>:
             <ul>
               <li>Moves focus to the previous tabbable element inside the dialog.</li>
               <li>If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.</li>

content/patterns/dialog-modal/examples/datepicker-dialog.html

@@ -252,7 +252,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
                 </td>
               </tr>
               <tr data-test-id="dialog-shift-tab">
-                <th><kbd>Shift + Tab</kbd></th>
+                <th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
                 <td>
                   <ul>
                     <li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
@@ -340,7 +340,7 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 </td>
               </tr>
               <tr data-test-id="grid-shift-pageup">
-                <th><kbd>Shift + Page Up</kbd></th>
+                <th><kbd>Shift</kbd> + <kbd>Page Up</kbd></th>
                 <td>
                   <ul>
                     <li>Changes the grid of dates to the same month in the previous year.</li>
@@ -364,7 +364,7 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 </td>
               </tr>
               <tr data-test-id="grid-shift-pagedown">
-                <th><kbd>Shift + Page Down</kbd></th>
+                <th><kbd>Shift</kbd> + <kbd>Page Down</kbd></th>
                 <td>
                   <ul>
                     <li>Changes the grid of dates to the same month in the next year.</li>

content/patterns/dialog-modal/examples/dialog.html

@@ -244,7 +244,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
               </td>
             </tr>
             <tr data-test-id="key-shift-tab">
-              <th><kbd>Shift + Tab</kbd></th>
+              <th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
               <td>
                 <ul>
                   <li>Moves focus to previous focusable element inside the dialog.</li>

content/patterns/disclosure/examples/disclosure-navigation-hybrid.html

@@ -203,7 +203,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
             <tr data-test-id="key-tab">
               <th>
                 <kbd>Tab</kbd><br>
-                <kbd>Shift + Tab</kbd>
+                <kbd>Shift</kbd> + <kbd>Tab</kbd>
               </th>
               <td>Move keyboard focus among top-level links and buttons, and if a dropdown is open, through links in the dropdown.</td>
             </tr>

content/patterns/disclosure/examples/disclosure-navigation.html

@@ -198,7 +198,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
             <tr data-test-id="key-tab">
               <th>
                 <kbd>Tab</kbd><br>
-                <kbd>Shift + Tab</kbd>
+                <kbd>Shift</kbd> + <kbd>Tab</kbd>
               </th>
               <td>Move keyboard focus among top-level buttons, and if a dropdown is open, into and through links in the dropdown.</td>
             </tr>

content/patterns/feed/examples/feed.html

@@ -81,11 +81,11 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <td>Move focus to previous article.</td>
             </tr>
             <tr data-test-id="key-control-end">
-              <th><kbd>Control + End</kbd></th>
+              <th><kbd>Control</kbd> + <kbd>End</kbd></th>
               <td>Move focus to the first focusable element after the feed.</td>
             </tr>
             <tr data-test-id="key-control-home">
-              <th><kbd>Control + Home</kbd></th>
+              <th><kbd>Control</kbd> + <kbd>Home</kbd></th>
               <td>Move focus to the first focusable element in the feed.</td>
             </tr>
           </tbody>

content/patterns/feed/feed-pattern.html

@@ -79,8 +79,8 @@ <h2>Keyboard Interaction</h2>
         <ul>
           <li><kbd>Page Down</kbd>: Move focus to next article.</li>
           <li><kbd>Page Up</kbd>: Move focus to previous article.</li>
-          <li><kbd>Control + End</kbd>: Move focus to the first focusable element after the feed.</li>
-          <li><kbd>Control + Home</kbd>: Move focus to the first focusable element before the feed.</li>
+          <li><kbd>Control</kbd> + <kbd>End</kbd>: Move focus to the first focusable element after the feed.</li>
+          <li><kbd>Control</kbd> + <kbd>Home</kbd>: Move focus to the first focusable element before the feed.</li>
         </ul>
         <div class="note">
           <h3>Note</h3>
@@ -96,8 +96,8 @@ <h3>Note</h3>
                   Users move focus into the nested feed from the content of the containing article with <kbd>Tab</kbd>.
                   This may be slow if the article contains a significant number of links, buttons, or other widgets.
                 </li>
-                <li>Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., <kbd>Alt + Page Down</kbd>.</li>
-                <li>To continue reading the outer feed, <kbd>Control + End</kbd> moves focus to the next article in the outer feed.</li>
+                <li>Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., <kbd>Alt</kbd> + <kbd>Page Down</kbd>.</li>
+                <li>To continue reading the outer feed, <kbd>Control</kbd> + <kbd>End</kbd> moves focus to the next article in the outer feed.</li>
               </ul>
             </li>
             <li>In the rare circumstance that a feed article contains a widget that uses the above suggested keys, the feed navigation key will operate the contained widget, and the user needs to move focus to an element that does not utilize the feed navigation keys in order to navigate the feed.</li>