mi6
Footer logo links focus indicator on Safari
Summary of the bug
On Safari, the logo links on ICDS footers show an underline like normal links when focussed.
🪜 How to reproduce
- Go to the 'With logo links' footer story on Safari.
- Hover on or tab to the logo links.
- See that they show a line underneath similar to the normal footer links.
I don't think this is correct because we only use that focus state elsewhere on links that are just text.
📸 Screenshots or code
🖥 📱 Device
- Browser: Safari
🧐 Expected behaviour
There are few things to do / think about here:
- Stop the underline from appearing in Safari on hover and focus.
- In Chrome, there is no focus indicator at all...
- I think this is mainly due to the fact that the developer slots their own links / images in. Should we set the ICDS focus indicator on the link they slot in?
- ^ On the website, we apply the ICDS focus indicator on the slotted links i.e. it is left up to the developer to add the focus indicator at the moment.
- Question for a designer - should we add a hover state to logo links? How would this work or look?
Added the "ICDS Core Team" label because of the need to discuss the hover state
In triage, it was suggested that we implement the same hover state / colour as that which is in on the app icon and app title on the top navigation component (I think we would want to use the same pressed state as well)
The logo links no longer show the underline in Safari - they just don't have a focus indicator at all, like in Chrome