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 renderDelButton = () => {
  return (
    <Link to="/someLink">
      <button className="delete-btn" aria-label="Delete" title="Delete this criteria">
        <Icon icon="gg:trash-empty" inline={true} width={15} height={15} alt="Delete this criteria"/>
      </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 bitbetter browser support .