-
Notifications
You must be signed in to change notification settings - Fork 333
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix focus style being overlapped by summary action links #3862
Conversation
aa4f024
to
87b2519
Compare
This is great, hadn't seen Could it have been solved with "target size" instead as those link heights are quite low on mobile? |
@colinrotherham My presumption is that the current spacing is intentional, as it means the links have a vertical rhythm consistent with the text next to it. If we increase the size or spacing of the links, we lose that bit of visual consistency. As there aren't usually more than a 2 or 3 action links (this being a contrived, extreme example), the target size issue probably doesn't manifest itself in a problematic way very often. The links are also (just barely) large enough to not fall foul of the WCAG 2.2 minimum target size in their current form. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's approve because it fixes what it claims to fix 😎
Regarding link heights (blocks of text are exempt?) there's a similar comment regarding Check your answers "Change" links but it's one for another issue
…inks Fix focus style being overlapped by summary action links
Cleanup Q: should this issue be in the govuk-frontend 5.0.0 milestone? |
Ah never mind, I see the issue associated with this pull request is in the 5.0.0 milestone 👍 Here's a full list of the accessibility issues addressed in 5.0, from what I can tell: https://github.com/alphagov/govuk-frontend/issues?q=milestone%3Av5.0+label%3Aaccessibility |
Fixes the WCAG 2.2 issue of subsequent action links in the summary list component slightly overlapping the currently focused link.
Resolves #3841.
Screenshots
Changes
isolation: isolate
style when focused. This creates a new stacking context, making it appear 'above' the surrounding content.Thoughts
position: relative
,transform: translate(0, 0)
, and others. I've used theisolation
property as it is intended specifically for this purpose, on the assumption this fix doesn't need to support IE. (Browser support forisolation
)row-gap
, preventing the overlap from occuring.