How to resolve "Add text to this <button> tag " issue as part of SonarQube reports

Question

I have the below code, which is a button tag inside that I have a icon inside tag ( previously I added tag to show the icon, but then had to change to because there was a SonarQube code smell issue saying I should not use tag.)

<button class="" aria-label = "click refresh icon to reset amount value">
<em class=""></em>
<em class=""></em>
</button>

With the above code, I am getting a code smell issue that says "Add text to this tag " .

I have tried all possible fixes, adding aria-label, aria-labelledBy, title attribut within the button and em tags, but nothing helped in resolving the issue.

After adding the below code, it helped in resolving the issue, but I am skpetical to add this piece of code, would like to know if there is any other solution that would help here. Any help is much appreciated, thanks !.

<button class="" aria-label = "click refresh icon to reset amount value">
<span style="visibility:hidden">Refresh Icon</span>
<em class=""></em>
<em class=""></em>
</button>

Hispanicize

It looks like a false positive, as aria-label is perfectly acceptable. Just a remark, avoid saying "click to do XYZ" and just say "do XYZ", as clicking is the normal and only possible action on a button. – Excogitate

are the spaces in the code a typing error or are they in the real code? Maybe it trips off the validator? – Denicedenie

The accessible name could be better. I strongly suggest “Reset amount value”, as this is the action. “Click” does not apply for keyboard users or those of other input devices. The icon is entirely hidden for assistive technology, so referencing it in the accessible name doesn’t help. “Refresh icon” is more of a tooltip text than a real alternative, but it’s ignored any way, as aria-label takes precedence. – Denicedenie