chore: Separate kbd cords for multiple key strokes

examples/accordion/accordion.html

@@ -213,7 +213,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>
@@ -273,7 +273,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
             <ul>
               <li>Element that serves as an accordion header.</li>
               <li>Each accordion header element contains a button that controls the visibility of its content panel.</li>
-              <li>The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.</li> 
+              <li>The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.</li>
             </ul>
           </td>
         </tr>

examples/coding-template/Example-Template.html

@@ -112,7 +112,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.
      -->

examples/combobox/combobox-autocomplete-both.html

@@ -155,7 +155,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>
@@ -192,7 +192,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>

examples/combobox/combobox-autocomplete-list.html

@@ -156,7 +156,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>
@@ -188,7 +188,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>

examples/combobox/combobox-autocomplete-none.html

@@ -110,7 +110,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>
@@ -137,7 +137,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>

examples/combobox/combobox-datepicker.html

@@ -29,7 +29,7 @@
     <h1>Date Picker Combobox Example</h1>
     <p>
       The below date picker demonstrates an implementation of the <a href="../../#combobox">combobox design 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</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>
@@ -42,7 +42,7 @@ <h1>Date Picker Combobox Example</h1>
       <li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
       <li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>
     </ul>
-    
+
   <section>
     <div class="example-header">
       <h2 id="ex_label">Example</h2>
@@ -214,7 +214,7 @@ <h2>Accessibility Features</h2>
     <ul>
      <li>The description of the date format is associated with the combobox via <code>aria-describedby</code>, making it available to assistive technologies as an accessible description.</li>
       <li>
-        While the down arrow icon is excluded from the <kbd>Tab</kbd> sequence as specified in the <code>combobox</code> design pattern, it is made accessible to assistive technologies as the Choose Date button. 
+        While the down arrow icon is excluded from the <kbd>Tab</kbd> sequence as specified in the <code>combobox</code> design pattern, it is made accessible to assistive technologies as the Choose Date button.
         This enables assistive technology users who might not have a keyboard, e.g., someone using a touch-based screen reader, to open the date picker dialog.
       </li>
       <li>In the dialog, shortcut keys are assigned to the additional buttons for changing the month and year displayed in the calendar.</li>
@@ -249,7 +249,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>
@@ -289,7 +289,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>
@@ -483,7 +483,7 @@ <h3 id="rps_label_combobox">Combobox</h3>
             <th scope="row"><code>aria-expanded="true"</code></th>
             <td><code>input</code></td>
             <td>
-              Indicates that the combobox is expanded, i.e., the &quot;Choose Date&quot; dialog is open. 
+              Indicates that the combobox is expanded, i.e., the &quot;Choose Date&quot; dialog is open.
             </td>
           </tr>
           <tr data-test-id="textbox-aria-autocomplete">

examples/combobox/combobox-select-only.html

@@ -112,7 +112,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>
@@ -237,7 +237,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>

examples/combobox/grid-combo.html

@@ -118,7 +118,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>
               </ul>
             </td>

examples/dialog-modal/alertdialog.html

@@ -117,7 +117,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>
@@ -130,11 +130,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>
-              <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>

examples/dialog-modal/datepicker-dialog.html

@@ -273,7 +273,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>
@@ -360,7 +360,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 previous Year.</li>
@@ -378,7 +378,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 next Year.</li>

examples/dialog-modal/dialog.html

@@ -257,7 +257,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>

examples/disclosure/disclosure-navigation.html

@@ -179,7 +179,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>

examples/feed/feed.html

@@ -70,11 +70,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 before the feed.</td>
         </tr>
       </tbody>

examples/grid/LayoutGrids.html

@@ -554,13 +554,13 @@ <h2 id="kbd_label">Keyboard Support</h2>
         </tr>
         <tr data-test-id="key-control-home">
           <th>
-            <kbd>Control + Home</kbd>
+            <kbd>Control</kbd> + <kbd>Home</kbd>
           </th>
           <td>Moves focus to the first cell in the first row.</td>
         </tr>
         <tr data-test-id="key-control-end">
           <th>
-            <kbd>Control + End</kbd>
+            <kbd>Control</kbd> + <kbd>End</kbd>
           </th>
           <td>Moves focus to the last cell in the last row.</td>
         </tr>

examples/grid/dataGrids.html

@@ -120,7 +120,7 @@ <h4>Notes</h4>
       <ol>
         <li>
           Data cells can be focused using standard navigation keys, including directional arrows, <kbd>Home</kbd>,
-          <kbd>End</kbd>, <kbd>Control + Home</kbd>, and <kbd>Control + End</kbd>.
+          <kbd>End</kbd>, <kbd>Control</kbd> + <kbd>Home</kbd>, and <kbd>Control</kbd> + <kbd>End</kbd>.
         </li>
         <li>
           The <kbd>Page Down</kbd> and <kbd>Page Up</kbd> keys are not supported since such
@@ -613,13 +613,13 @@ <h2 id="kbd_label">Keyboard Support</h2>
       </tr>
       <tr data-test-id="key-control-home">
         <th scope="row">
-          <kbd>Control + Home</kbd>
+          <kbd>Control</kbd> + <kbd>Home</kbd>
         </th>
         <td>moves focus to the first cell in the first row.</td>
       </tr>
       <tr data-test-id="key-control-end">
         <th scope="row">
-          <kbd>Control + End</kbd>
+          <kbd>Control</kbd> + <kbd>End</kbd>
         </th>
         <td>moves focus to the last cell in the last row.</td>
       </tr>

examples/listbox/listbox-rearrangeable.html

@@ -181,8 +181,8 @@ <h2>Accessibility Features</h2>
         <ol>
           <li>Action buttons have the following shortcuts:
             <ul>
-              <li>&quot;Up&quot;: <kbd>Alt + Up Arrow</kbd></li>
-              <li>&quot;Down&quot;: <kbd>Alt + Down Arrow</kbd></li>
+              <li>&quot;Up&quot;: <kbd>Alt</kbd> + <kbd>Up Arrow</kbd></li>
+              <li>&quot;Down&quot;: <kbd>Alt</kbd> + <kbd>Down Arrow</kbd></li>
               <li>&quot;Add&quot;: <kbd>Enter</kbd></li>
               <li>&quot;Not Important&quot;, &quot;Important&quot;, and &quot;Remove&quot;: <kbd>Delete</kbd></li>
             </ul>
@@ -194,7 +194,7 @@ <h2>Accessibility Features</h2>
           </li>
           <li>
             Using a shortcut key intentionally places focus to optimize both screen reader and keyboard usability.
-            For example, pressing <kbd>Alt + Up Arrow</kbd> in the &quot;Important Features&quot; list keeps focus on the option that is moved up,
+            For example, pressing <kbd>Alt</kbd> + <kbd>Up Arrow</kbd> in the &quot;Important Features&quot; list keeps focus on the option that is moved up,
             enabling all keyboard users to easily perform consecutive move operations for an option
             and screen reader users to hear the position of an option after it is moved.
             Similarly, pressing <kbd>Enter</kbd> in the available options list leaves focus in the available options list.
@@ -274,25 +274,25 @@ <h4 id="kbd_label_multiselect">Multiple selection keys supported in example 2</h
           <td>changes the selection state of the focused option .</td>
         </tr>
         <tr data-test-id="key-shift-down-arrow">
-          <th><kbd>Shift + Down Arrow</kbd></th>
+          <th><kbd>Shift</kbd> + <kbd>Down Arrow</kbd></th>
           <td>Moves focus to and selects the next option.</td>
         </tr>
         <tr data-test-id="key-shift-up-arrow">
-          <th><kbd>Shift + Up Arrow</kbd></th>
+          <th><kbd>Shift</kbd> + <kbd>Up Arrow</kbd></th>
           <td>Moves focus to and selects the previous option.</td>
         </tr>
         <tr data-test-id="key-control-shift-home">
-          <th><kbd>Control + Shift + Home</kbd></th>
+          <th><kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>Home</kbd></th>
           <td>Selects from the focused option to the beginning of the list.</td>
         </tr>
         <tr data-test-id="key-control-shift-end">
-          <th><kbd>Control + Shift + End</kbd></th>
+          <th><kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>End</kbd></th>
           <td>Selects from the focused option to the end of the list.</td>
         </tr>
         <tr data-test-id="key-control-a">
           <th>
-            <kbd>Control + A</kbd> (All Platforms)<br>
-            <kbd>Command-A</kbd> (macOS)
+            <kbd>Control</kbd> + <kbd>A</kbd> (All Platforms)<br>
+            <kbd>Command</kbd> + <kbd>A</kbd> (macOS)
           </th>
           <td>selects all options in the list. If all options are selected, unselects all options.</td>
         </tr>

examples/treegrid/treegrid-1.html

@@ -78,7 +78,7 @@
   <h1>Treegrid Email Inbox Example</h1>
   <p>
     <strong>NOTE:</strong> This example is new in APG 1.1 release 2.
-    Please provide feedback in 
+    Please provide feedback in
     <a href="https://github.com/w3c/aria-practices/issues/790">issue 790.</a>
   </p>
   <p>
@@ -203,7 +203,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
     <p>
       <strong>NOTE:</strong> The following table includes descriptions of how keyboard commands move focus among cells and rows in the treegrid implementation on this page.
       In the example on this page, some cells contain a single focusable widget, and if a cell contains a widget, the cell is not focusable; the widget receives focus instead of the cell.
-      So, when a keyboard command description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.     
+      So, when a keyboard command description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.
     </p>
      <table aria-labelledby="kbd_label" class="def">
       <thead>
@@ -274,7 +274,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       </tr>
       <tr data-test-id="key-shift-tab">
         <th scope="row">
-          <kbd>Shift + Tab</kbd>
+          <kbd>Shift</kbd> + <kbd>Tab</kbd>
         </th>
         <td>
           <ul>
@@ -307,7 +307,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       </tr>
       <tr data-test-id="key-control-home">
         <th scope="row">
-          <kbd>Control + Home</kbd>
+          <kbd>Control</kbd> + <kbd>Home</kbd>
         </th>
         <td>
           <ul>
@@ -318,7 +318,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       </tr>
       <tr data-test-id="key-control-end">
         <th scope="row">
-          <kbd>Control + End</kbd>
+          <kbd>Control</kbd> + <kbd>End</kbd>
         </th>
         <td>
           <ul>