feat(leaving-ibm): v2 style updates

[sangeethababu9223]

Related Ticket(s)

Closes #10856

Description

Style / layout break in Leaving IBM Component in V2

Changelog

Changed

• button element changed
• Styles updated to match the latest

[ibmdotcom-bot]

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10941/index.html

Built with commit: c924e88a1c5a384482b5e021f9c4ac162fdf7ee5

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10941/index.html

Built with commit: c924e88a1c5a384482b5e021f9c4ac162fdf7ee5

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10941/index.html

Built with commit: c924e88a1c5a384482b5e021f9c4ac162fdf7ee5

[oliviaflory]

@sangeethababu9223 this is looking really good from a design perspective! A few fixes I found:

1. • The focus state for the link is getting cut off when (tabbing into the link) see the screen shot attached
     
2. • I cannot interact with the link within the modal, was it like that in the v1 version?
3. • There are no interactive states on the link within the modal (hover, focus, click) they should match the standard link states, you can see them documented in the Carbon link website docs or CWC
4. • The focus should probably be trapped within the modal as it is within the v1 version, right now I can use the keyboard to tab outside of the modal and navigate around on the page under the overlay which will be confusing for the users.
5. • On mobile the heading and close button are getting cut off at the top of the browser, while there is a gap at the bottom of the browser and I can see overlay. I am expecting to see the same behavior as the v1 version where the heading is not cut off and the button is pinned to the bottom and I should not see the overlay.

Current mobile	Expecting

[IgnacioBecerra]

It's looking good! Olivia addressed most of the things I wanted to mention, so just a few comments code-wise, will re-review once the design changes have been implemented :) 👍

[sangeethababu9223]

@oliviaflory,
All of the issues except the focus trap not working in modal should be fixed now.
Focus trap seems to be an issue with Modal component. I've created a separate ticket for this: #10966
Will work on that once this issue is resolved.

[oliviaflory]

@sangeethababu9223 Thank you! FYI the focus trap is working for me on Chrome, but it would be good to track for all browsers if you are noticing it not working on another 😄

[sangeethababu9223]

Thanks @oliviaflory,
I faced issue with focus trap in in both Safari & Firefox. I'll look into this for the other ticket.