0

In Angular 9, I have a button to edit a contact in a table of contacts.

   <button class="btn btn-link btn-sm" aria-label="Edit Contact">
     <i class="icon-mini icon-pencil"></i>
   </button>

I obviously can add the aria-label to the icon button to say what it does, "edit contact". But I'd like to say "Edit Contact Jim Jones", which in this table would be {{contact.full_name}}.

Can this be done?

Steve
  • 14,401
  • 35
  • 125
  • 230

1 Answers1

1

When binding to ARIA attributes in Angular, you must use the attr. prefix, as the ARIA specification depends specifically on HTML attributes rather than properties on DOM elements.

source

<button class="btn btn-link btn-sm" [attr.aria-label]="contact?.full_name">

Note that this syntax is only necessary for attribute bindings. Static ARIA attributes require no extra syntax.

Ashish Ranjan
  • 12,760
  • 5
  • 27
  • 51