# How to fix this template linting error?

**URL:** <https://discuss.emberjs.com/t/how-to-fix-this-template-linting-error/18205>\
**Category:** General\
**Created:** [September 14, 2020, 9:01am UTC](https://discuss.emberjs.com/t/how-to-fix-this-template-linting-error/18205 "2020-09-14T09:01:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![wuarmin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wuarmin/32/16390_2.png) [@wuarmin](https://discuss.emberjs.com/u/wuarmin)\
**Post date:** [September 14, 2020, 9:01am UTC](https://discuss.emberjs.com/t/how-to-fix-this-template-linting-error/18205/1 "2020-09-14T09:01:27Z")

</div>

Following snippet

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

```

![image](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/0/7/07756fca28f5a26caed85aa62346c2f3693a4f1e.png)produces following template warning:

```nohighlight
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!

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [September 14, 2020, 2:16pm UTC](https://discuss.emberjs.com/t/how-to-fix-this-template-linting-error/18205/2 "2020-09-14T14:16:53Z")

</div>

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>`.

---

<div class="post-metadata">

**Author:** ![wuarmin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wuarmin/32/16390_2.png) [@wuarmin](https://discuss.emberjs.com/u/wuarmin)\
**Post date:** [September 22, 2020, 7:40am UTC](https://discuss.emberjs.com/t/how-to-fix-this-template-linting-error/18205/3 "2020-09-22T07:40:29Z")

</div>

Thank you @dknutsen . Your input was very helpful!