USWDS - Footer: Show overflow (for focus rings)#6093
Conversation
This `overflow: hidden` doesn't seem to serve any purpose, and cuts off the focus ring of elements at the edge of the footer.
There was a problem hiding this comment.
Thanks for submitting this PR @6TELOIV. The focus outline now appears on all sides of the link elements.
I noticed that there is a small visual regression in the mobile view, where the list element borders are now visible outside the footer container. I've attached a screenshot that demonstrates this:
This is likely not typically visible in project environments where the footer spans from edge to edge, but it is something that should be resolved. I do not see any other visual regressions after removing overflow: hidden.
Please let us know if you have any questions.
|
I think the solution to that regression is to move Additionally, this fixes a different visual inconsistency in the Slim footer. notice the difference in length of the border on the primary links vs the contact links.
|
cathybaptista
left a comment
There was a problem hiding this comment.
@6TELOIV and @mahoneycm , I'm not seeing any regressions with this approach. Thanks for all of your work! :)
mahoneycm
left a comment
There was a problem hiding this comment.
LGTM! Thank you for the contribution and updates @6TELOIV !
- Footer no longer hides focus ring using example markup provided
- No perceived visual regression across variants and breakpoints
- Code changes are minimal and logical
|
Thanks for the update @6TELOIV. I found one more minor visual regression in the slim footer (see screenshot below). @mahoneycm, @cathybaptista, @mejiaj
If we like this solution, we can either incorporate that change in this branch or just merge in that PR. Let me know what you think. Regression in slim footer variant: |
|
@6TELOIV, if you get a chance, can you review the change in #6237? |
|
@amyleadem sorry, I haven't done reviews of my own before, usually I'm requesting others to review! I think #6237 makes sense and just merging that and closing this one seems good (correct me if I'm misunderstanding anything here!). |
Summary
Remove
overflow: hiddenfromusa-footerto let focus ring show.Breaking change
None
Related issue
Closes #6092
Related pull requests
None
Preview link
None
Problem statement
Focus rings are visually cut off at the top in the footer.
Solution
Removing
overflow: hiddenallows focus rings to show at the edge of the footer.Testing and review
Should visually review the various recommended
usa-footerlayouts to make sure this doesn't introduce any overflow bugs.