How to add button role to a custom element in angular to make it accessible by screen reader?

I have a custom component in angular that handles images. I have alt text as an input to the element and the screen reader picks it up to utter it out. But whenever I tab to the image, it says 'Trash' group. I want the screen reader to read it out as 'Trash' button. How can I achieve this? The following is my current implementation:

Icn component:

<img [ngClass]="class" [file]="file" [alt]="alt">

Usage:

<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>

I tried role="button" but that didn't work.

Solution

I don't know Angular so you may need to do some digging on how to structure this but your approach is making things difficult.

Instead make the button a <button>. This way you get all the native accessibility built in (e.g. accessible via tab by default, accepts focus, has hover and focus states etc.)and you will also get the correct announcements in screen readers.

Then place the icon inside the <button> and just style it appropriately.

<button> <!--add whatever directives angular requires here-->
   <img [ngClass]="class" [file]="file" [alt]="alt">
</button>

Also you may consider using inline SVGs for your icons as they offer styling options and can change colour according to user preferences. It is also one less resource to download so will help with performance.