chore: Separate kbd cords for multiple key strokes

[nschonni]

Related to this, it would be nice to have a little styling on the kbd element, but I'm not sure if that's something that is supposed to come from the common CSS rather than specific to this repo. Some examples of the styling over here https://auth0.github.io/kbd/

---

Preview | Diff

[github-actions]

Regression test coverage:

Examples without any regression tests:

• dialog-modal/alertdialog.html

Examples missing some regression tests:

• dialog-modal/datepicker-dialog.html:
  • textbox-aria-describedby
• menu-button/menu-button-actions-active-descendant.html:
  • menu-up-arrow
  • menu-down-arrow
  • menu-character
• toolbar/toolbar.html:
  • toolbar-tab
  • toolbar-right-arrow
  • toolbar-left-arrow
  • toolbar-home
  • toolbar-end
  • toolbar-toggle-esc
  • toolbar-toggle-enter-or-space
  • toolbar-radio-enter-or-space
  • toolbar-radio-down-arrow
  • toolbar-radio-up-arrow
  • toolbar-button-enter-or-space
  • toolbar-menubutton-enter-or-space-or-down-or-up
  • toolbar-menu-enter-or-space
  • toolbar-menu-down-arrow
  • toolbar-menu-up-arrow
  • toolbar-menu-escape
  • toolbar-spinbutton-down-arrow
  • toolbar-spinbutton-up-arrow
  • toolbar-spinbutton-page-down
  • toolbar-spinbutton-page-up
  • toolbar-checkbox-space
  • toolbar-link-enter-or-space
  • toolbar-spinbutton-role

Example pages with Keyboard or Attribute table rows that do not have data-test-ids:

• dialog-modal/alertdialog.html
  • "Keyboard Support" table(s):
    • Tab
    • Shift + Tab
    • Escape
    • Command + S
    • Control + S
  • "Attributes" table(s):
    • alertdialog
    • aria-labelledby=IDREF
    • aria-describedby=IDREF
    • aria-modal=true
    • alert

SUMMARY:

55 example pages found.
1 example pages have no regression tests.
3 example pages are missing approximately 27 out of approximately 780 tests.

ERROR - missing tests:

Please write missing tests for this report to pass.

[nschonni]

@mcking65 actually I'm seeing in https://github.com/w3c/aria-practices/wiki/APG-Editorial-Style-Guidelines#using-the-kbd-tag that you're recommending the combination. Is there a reason for that?

[ZoeBijl]

@nschonni I assume it’s because the keys have to be pressed together?

[nschonni]

The only real edge case I can see, where this approch is better is:
ctrl + +

vs.

ctrl + +

[ZoeBijl]

And maybe Ctrl + - then? 😂

[mcking65]

replaced by #3093