kbd role generates HTML that's difficult/impossible to style for compound-keystrokes

[johnnovak]

Describe the bug

The :kbd: role doesn't mark container <kbd> elements with a CSS class, so they can be styled differently that child <kbd> elements representing actual keystrokes.

To Reproduce

For the below input

:kbd:`A`

:kbd:`Shift+X`

the following output is generated:

<kbd class="kbd docutils literal notranslate">A</kbd>

<kbd class="kbd docutils literal notranslate">
  <kbd class="kbd docutils literal notranslate">Shift</kbd>+
  <kbd class="kbd docutils literal notranslate">X</kbd>
</kbd>

Now we have a problem here: there is no way to differentiate between the parent container <kbd> element and the child <kbd> element with CSS selectors! If we provide a CSS style to draw a border around a <kbd> element, so single keystrokes are displayed correctly, then in the second example we'd get a double border (borders around the child elements, and another border around the parent element).

If you want to have borders around single keystrokes, and only around the child <kbd> elements in compound keystrokes, as shown on the screenshot below, the only way is to differentiate the container and child <kbd> elements with a CSS class.

Expected behavior

Single keystrokes are fine as they are, no change needed:

<kbd class="kbd docutils literal notranslate">A</kbd>

For compound keystrokes, the container <kbd> element should be marked with a CSS class (e.g. compound) so it can be styled differently than the child <kbd> elements:

<kbd class="kbd compound docutils literal notranslate">
  <kbd class="kbd docutils literal notranslate">Shift</kbd>+
  <kbd class="kbd docutils literal notranslate">X</kbd>
</kbd>

Environment info

• OS: Windows
• Python version: 3.9.1
• Sphinx version: 3.4.0
• Sphinx extensions: -
• Extra tools: -

[idnsunset]

Quite agree, the outer <kbd> and inner <kbd> should be given different attributes for distinction. CSS has no way of selecting parent element so we are not able to determine whether a <kbd> element contains nested <kbd>.

With key combination and certain style for <kbd>, we get:

[tk0miya]

+1: Reasonable. Do you have a good naming for the <kbd> tag?