fix: active states and focus states of inline and standalone links

[riddhybansal]

Closes #15613

Added an underline on the focus state and active state

Changed

• Changed some styles to incorporate underline at different states

Testing / Reviewing

• Test the default and inline link component in active and focus states it should have underline.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	03e05af
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65e0ab33efa6d400086f0cf7
😎 Deploy Preview	https://deploy-preview-15846--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tw15egan]

LGTM 👍 ✅

[laurenmrice]

Looks great Riddhi! Just one thing:

Focus state
In Firefox and Safari I can not get the Focus state on the actual Link in the example/demo on any of the stories. I could get it in Chrome, and it looks good! Just was wondering if that is a bug or if you have to operate things differently in those browsers to get the Focus on the link.

[guidari]

Seems like it is a problem on Safari and FF.
I used this solution here from StackOverflow and worked in FF, but not for Safari

[guidari]

I got it working on Safari.
Go to Safari Settings -> Advanced
Enable the option: Press Tab to highlight each item on a webpage page

I'll approve, since it is something from the browsers

[riddhybansal]

@laurenmrice Its working on Safari as well , some settings needs to be changed.