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

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  href="#">Sample Link <a>
  
<h1 > Sample Heading </h1>
  
<a  href="#">
  <h1> Heading inside Link </h1>
</a>

<a  href="#">
  <span> span inside Link <span>
</a>

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

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

CodePudding user response：

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  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  href="#">Sample Link <a>
  
<h1  tabindex="0"> Sample Heading </h1>
  
<a  href="#">
  <h1>Heading inside Link </h1>
</a>

<a  href="#">
  <span>span inside Link </span>
</a>