UDS-1975: fix(component-events): added style to fix a:focus

[juanmitriatti]

UDS-1975

Description

Links

• JIRA ticket
• Unity reference site
• Unity Design Kit

[asu-jenkins-devops]

Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1493/index.html

[mlsamuelson]

Fix is causes layout shift when the images and links are focused. Are we able to use the same technique as with other focus instances so we avoid that?

[juanmitriatti]

Fix is causes layout shift when the images and links are focused. Are we able to use the same technique as with other focus instances so we avoid that?

I added margin: 4px to make the box-shadow visible on focus. Without this margin, the wrapper tag (for example, in the h3 of the title) hides it, causing the 'movement' effect when focusing. Also, display: inline-block ensures that the box-shadow applies globally rather than per line.

With display: inline-block

Without

[davidornelas11]

@mlsamuelson The overflow hidden on the parent h3 causes the shadow to not appear. The hidden is there because the heading shouldn't pass 3 lines so that's necessary

[mlsamuelson]

Is there any way we can accomplish this without the layout shifting when focus occurs? What are our options?

If we can't change it, we will need to have The Brand team review the behavior for acceptability.

[juanmitriatti]

Is there any way we can accomplish this without the layout shifting when focus occurs? What are our options?

If we can't change it, we will need to have The Brand team review the behavior for acceptability.

The box-shadow on focus extends beyond the element’s box, but since overflow: hidden is applied, it gets clipped. We can’t make it visible without adding a margin, and adding it causes the layout shift.

[juanmitriatti]

Hi @mlsamuelson , @davidornelas11
I found a possible solution: add margin: 4px and display: inline-block to the a .card-title styles to ensure the box shadow is visible, and remove these styles from a:focus.
The problems/concerns that we've here are :

• Image left border does not show up (it's because the wrapper class has overflow: hidden) . (Please check first image attached)
  In order to fix this, we could add margin: 0 4px to the wrapper ul classes. (Please check second image attached).

• On the other hand, all the titles will have margin: 4px.

1. First image:
   

2. Second image:

[mlsamuelson]

I'm less concerned with the images, and more concerned with the text - that should be preventable. If we can avoid the text from shifting, then I'm okay with allowing the images to shift some.

[mlsamuelson]

Conversation on this here

[davidornelas11]

This has been tested and double checked by Alysia on the brand team. Looks good. Will approve and merge

Changes made