How to fix this template linting error?

Questions General
1

Following snippet

<a href="#" class="ui label">
  {{serviceCode}}
  <i class="delete icon" role="button" {{on "click" this.removeServiceCode}}></i>
</a>

image produces following template warning:

Do not use an element with `role="button"` inside an <a> element with the `href` attribute  no-nested-interactive

How should I solve that?

Thx and best regards!

2

I think the rule is complaining because you have a button inside a link (aka “nested interactive” elements). I’d say the outer tag probably shouldn’t be a link <a> tag. Links should mostly only be used when you’re actually linking somewhere, and here you’re clearly setting the href to just #. If this is just a tag/badge and the whole component isn’t interactive I don’t see any reason to use an <a> tag and it would make more sense to use a span or div.

If the entire thing should be interactive then you could move the “button” role from the icon to the <a> tag but you should still consider using a button/span instead of <a>.

2 Likes
3

Thank you @dknutsen . Your input was very helpful!