carbon
carbon copied to clipboard
Sage
Link wrapping an image does not get focus styling on GlobalHeader
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
- [X] I confirm there is no confidential or commercially sensitive information included.
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:
@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?
@harpalsingh Hey, would you be able to take a look at this and advise on what the focus border should look like. Thanks!
@nineteen88 yep so this is the expectation of the focus on a logo visula, so its an internal version of the double border:
:tada: This issue has been resolved in version 158.7.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
