[Bug]: icon buttons display 'active' grey background color on focus

[csalter]

Package

@carbon/react

Browser

Chrome

Package version

v11

React version

v17.0.2

Description

A ghost button with a renderIcon property displays a grey background on focus. It's expected that the grey background is only shown when the button is active (see screenshot below). This issue seems to have been introduced by this commit .

Reproduction/example

https://stackblitz.com/edit/github-xhdttodv?file=src%2FApp.jsx

Steps to reproduce

• tab to the ghost button via keyboard and notice that its background goes gray (we'd expect the blue outline but not the 'active' background)

Suggested Severity

Medium (Severity 3) = User can complete task, and/or has a workaround within the user experience of a given component.

Project name

Watson Orchestrate

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[csalter]

@heloiselui I've opened this bug as requested.

[carbon-automation]

Just a quick heads-up: for medium severity issues, it may be a while before the core team can get to this. If you’re up for opening a PR, that’ll likely be the quickest path to a fix, but no worries if not. Thanks!

[Anurag7376]

Hi! I'd like to work on this issue.

I've reproduced the issue and traced it to the ghost icon-only button focus styles in packages/styles/scss/components/button/_button.scss. I'll investigate the introducing commit, make the smallest appropriate fix

If that's okay, I'd be happy to take this on.

[heloiselui]

Hey @alina-jacob @Kritvi-bhatia17 — I was looking into this issue and I’m not sure if this is actually a bug/regression. IconButtons showing the grey “active” background on focus was intentional, right? or I'm missing something?
#21399

I also checked the storybook example and Figma file:
https://react.carbondesignsystem.com/?path=/story/components-iconbutton--default&args=kind:ghost;

Could you help us?