From aea45296990d3916fc591e9d50d511e91b490770 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 11 Oct 2023 12:57:52 -0300
Subject: [PATCH] add back the class target

---
 docs/pages/experiments/docs/markdown.md        | 5 ++---
 docs/src/modules/components/MarkdownElement.js | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/pages/experiments/docs/markdown.md b/docs/pages/experiments/docs/markdown.md
index 90c8cbc285be4c..caf8fb2b202cd1 100644
--- a/docs/pages/experiments/docs/markdown.md
+++ b/docs/pages/experiments/docs/markdown.md
@@ -37,6 +37,5 @@ https://spec.commonmark.org/0.30/#links
 
 ## kbd tag
 
-**In isolation:** <kbd class="key">caps lock</kbd>
-
-**In context:** The following demo shows how the `focusableWhenDisabled` prop works—use the <kbd>Tab</kbd> key to navigate within this document to see that only the second Button accepts the focus:
+Make sure to include the `class="key"` in each individual `kbd` element.
+That's because when referring to two keys that should be pressed together－for example, <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>－all the individual `kbd` elements should be wrapped by a parent `kbd`, and we don't add styles to just the tag.
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 4e8dafcd543d99..a8e4cb05f02953 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -416,7 +416,7 @@ const Root = styled('div')(
       flexShrink: 0,
       backgroundColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
     },
-    '& kbd': {
+    '& kbd.key': {
       padding: 6,
       display: 'inline-block',
       whiteSpace: 'nowrap',
@@ -681,7 +681,7 @@ const Root = styled('div')(
       '& a code': {
         color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`,
       },
-      '& kbd': {
+      '& kbd.key': {
         color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
         backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,
         border: `1px solid var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,