Outline style is not getting applied when heading is used inside anchor

June 2, 2022

When using heading inside anchor "outline-style" is not getting applied.
I added outline: 4px dashed darkorange; for focus-visible of parent anchor tag.

It works for auto style outline: 4px auto darkorange; , but for others like solid, dashed, dotted it’s not working

Please let me know if I miss anything or if we have any workaround for this issue

<a class="focus-visible-only" href="#">Sample Link <a>
  
<h1 class="focus-visible-only"> Sample Heading </h1>
  
<a class="focus-visible-only" href="#">
  <h1> Heading inside Link </h1>
</a>

<a class="focus-visible-only" href="#">
  <span> span inside Link <span>
</a>

.focus-visible-only:focus-visible {
  outline: 4px dotted darkorange;
}

codepen link: https://codepen.io/vivid888/pen/xxYjNJx

>Solution :

As <h1> by itself is not an interactive element, you can’t tab to it. To make it tabbable, apply tabindex="0".

To make the nested <h1>-property take the focus styling, you need to use a.focus-visible-only:focus-visible to trigger the focus, and then afterwards use the selector <h1> to apply the styling.

I don’t know why the <h1> Heading inside Link </h1>-element’s behaviour is so weird – it wraps around the

<a class="focus-visible-only" href="#">
  <span> span inside Link <span>
</a>

element for some reason. You could just apply display: block on the container <a>-element to change this.

Also, you can use max-width: fit-content if you don’t want the link to take up the full width.

.focus-visible-only:focus-visible {
  outline: 2px dotted darkorange;
}

a.focus-visible-only:focus-visible h1 {
  outline: 2px dotted darkorange;
}

a:last-of-type {
  display: block;
}

a,
h1,
span {
  max-width: fit-content;
}

<a class="focus-visible-only" href="#">Sample Link <a>
  
<h1 class="focus-visible-only" tabindex="0"> Sample Heading </h1>
  
<a class="focus-visible-only" href="#">
  <h1>Heading inside Link </h1>
</a>

<a class="focus-visible-only" href="#">
  <span>span inside Link </span>
</a>