Nav links jump around when navigating by keyboard in Safari – Footer component, two column list layout

[danacotoran]

The fact that the links are not aligned when there is an odd number of items in the list is already recorded as an issue here #1284

This issue is adjacent to the one mentioned above.

This issue relates to keyboard navigation on the footer component (two column layout), in Safari (screenshots from Safari on Mac OS 10.14.6). It occurs only when one of the columns is longer than the other column.

Default state (incorrect alignment, as is already mentioned in this issue #1284)

When the last link in the longer column is in focus

When the last link in the longer column is in focus, the alignment is correct, however it looks like the links are "jumping around" if someone is tabbing through the footer navigation. This can be visually jarring to the user.

---

Related issue in Chrome browser recorded here #1888

[vanitabarrett]

As mentioned in v4.0.0 prioritisation, we're going to do a timeboxed investigation into #1726 and #1539 first. It's possible that this issue might be fixed if we switch to a different layout system in the footer. We should make sure we keep this card in mind when doing any testing during that investigation.

[36degrees]

Have re-tested and this is still an issue in Safari 15.3 with GOV.UK Frontend v4.0.1.

I'm not really sure what we can change here, as it seems like the columns are taking into account the additional outline and box-shadow (!) on focus – you have to remove both to stop this from happening.

Definitely feels like there's a bug here to report to Webkit? I've had a quick search of existing bugs and can't see any that cover this, or the alignment issue in #1284

[matthillco]

I've recently completed a small PR that may contain a fix for this, see here for further info: frontend/3253

[36degrees]

Thanks for the heads up @matthillco!

I tried adding break-inside: avoid-column; to govuk-footer__list-item but unfortunately it makes things worse! 😩 When tabbing through the focused link now moves to the next column!

Screen.Recording.2022-06-16.at.16.47.15.mov

I also tried adding it to govuk-footer__link but it had no effect.

Based on your testing is there anything else you think we should be trying?

[matthillco]

One thing I found is that margins seem to be an issue. I removed the margins and instead placed padding on the inside of the list item with the same value as the margin. The browser considers the available space differently when it's internal to the item, rather than external (as a margin would be). However, there were still minor rendering errors with this approach, which I fixed by setting both top and bottom padding. There's more detailed comments in this commit. Let me know how you get on, maybe my fix was very specific to my issue and doesn't work more generally?