Dark keybinding indicator when used with emphasis

[alondahari]

Description

This is a recent regression introduced in the latest version.

We're seeing an issue with how the keybindings indicator on the Button component looks in Issues.

There is currently no way that we see that we can use keybinding hint component with a primary button.

Steps to reproduce

1. Add a KeybindingHint to a primary button
2. With onEmphasis, it has a dark background. With normal variant, it has a dark fore colour.

Version

v37.6.0

Browser

Chrome

[github-actions]

Uh oh! @alondahari, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[francinelucca]

Summary:
This is an intended change resulting from #4759. New designs are in the making and the reporting team will workaround with style overrides for now

[francinelucca]

TODO: once a fix for this is released, go back and "revert" workaround

[RJohnPaul]

Here is a potential solution that you can consider for the issue Dark keybinding indicator when used with emphasis:

Solution
The issue seems to stem from the CSS styling applied to the KeybindingHint component when used with a primary button. To fix this, you can override the default styles by adding custom styles specifically for the KeybindingHint component when it's used with the primary button. Here is an example of how you can achieve this:

CSS
/* Add this CSS to your stylesheet /
.primary-button .keybinding-hint {
color: #fff; / Adjust the color as needed /
background-color: #005cc5; / Adjust the background color as needed /
/ Add any other necessary styles */
}
Steps to Apply the Fix
Locate the stylesheet where you define custom styles for your project.
Add the above CSS rules to the stylesheet.
Ensure that the styles are correctly applied by refreshing the page and checking the KeybindingHint component on the primary button.
Comments