ithaka
Focusing on a heading nested under a link doesn't render a blue outline in Chrome
Expected behavior A blue outline on focus. Works correctly in Firefox:
Actual behavior There's no blue outline on focus
Steps to reproduce the issue
Reproducible in Chrome, but not on Firefox:
- In Chrome, visit https://pharos.jstor.org/storybooks/wc/iframe.html?id=components-link--visited-link-heading&viewMode=story
- Press tab until it focuses on the link
- There's no blue outline on focus
Pharos version 12.17.0
Your environment
- Browser: Chrome
- Version: 109.0.5414.119
- Browser: Safari
- Version: 15.6.1 (17613.3.9.1.16)
did some digging and came up empty 😅 same issue it seems in Safari.
I do see the correct styles being added to the #link-element when programmatically selecting it. but for whatever reason it's not shown 😕
did some digging and came up empty 😅 same issue it seems in Safari.
I do see the correct styles being added to the #link-element when programmatically selecting it. but for whatever reason it's not shown 😕
I looked into it and found the issue to be not rendering the layout, so we just need to update the display. I will open a PR once I'm able to.
Additional findings from research/experimentation for future reference:
- From a styling perspective, it would be ideal to be able to style nested slots
- Currently we're not able to because it depends on open issues https://github.com/WICG/webcomponents/issues/936 and https://github.com/w3c/csswg-drafts/issues/6867
We should consider how this is impacted as we think about using :focus-visible (#175)
