title: How to add button role to a custom element in angular to make it accessible by screen reader?
body: <p>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:</p>
  
  <p>Icn component:</p>
  
  <pre><code>&lt;img [ngClass]="class" [file]="file" [alt]="alt"&gt;
  </code></pre>
  
  <p>Usage: </p>
  
  <pre><code>&lt;icn class="del-icon" [file]="'trash'" [alt]="Trash"&gt;&lt;/icn&gt;
  </code></pre>
  
  <p>I tried role="button" but that didn't work. Any help/guidance is appreciated.</p>