Link wrapping an image does not get focus styling on GlobalHeader

[johnb-sage]

Description

An image wrapped in Link (e.g. a logo) is not styled when focused on GlobalHeader.

Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-hfnajo?file=src%2FApp.tsx

Steps to reproduce

Tab to the Logo, no focus styling is applied.

Also note the focus styling on the text link, seems that box shadow is being incorrectly applied.

JIRA ticket numbers (Sage only)

No response

Suggested solution

No response

Carbon version

141.4.4

Design tokens version

No response

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[Parsium]

Thanks for raising this @johnb-sage 👍🏼

May I check what styling you expect to see when the logo in the demo is focused? Have you received any specific designs for this? We assume the logo would require the standard gold focus ring, similar to this example:

[johnb-sage]

@Parsium I feel GlobalHeader wouldn't comfortably support the double focus ring. Since space is tight in this case a much thinner focus style might be more appropriate?

[nineteen88]

@harpalsingh Hey, would you be able to take a look at this and advise on what the focus border should look like. Thanks!

[harpalsingh]

@nineteen88 yep so this is the expectation of the focus on a logo visula, so its an internal version of the double border:

[nineteen88]

FE-6802