How do I write alt text for an icon inside a button tag?

Question

I'm using react and I have a table with a Delete action column. I'm displaying a delete button in each row and want to have alt text for the entire button but I'm not sure how to do this since does not come with an alt option. I tried the below code but it doesn't work. I know I'm not doing it correctly so I wanted some guidance.

Also, I'm using the iconify library for my icon.

const DelButton = () => {
  return (
    <Link to="/someLink">
      <button aria-label="Delete" title="Delete">
        <Icon icon="gg:trash-empty" alt="Delete"/>
      </button>
    </Link>
  )
}

Answer 1

Using aria-label on the button element should be sufficient.

You should remove the alt attribute from your Icon element. If it doesn't render to an img element, then it's not valid HTML anyway.

aria-label not only takes precedence over the title attribute in the accessible name computation, but it also enjoys quite a bit better browser support.