I have dynamic text to bind to aria-label on a HTML page.
This is an Angular 2 app. I am using something like this:
aria-label="Product details for {{productDetails?.ProductName}}"
But I get an error:
Can't bind to 'aria-label' since it isn't a known property of 'div'.
Is there any workaround for this?
Just use attr. before aria-label:
attr.aria-label="Product details for {{productDetails?.ProductName}}"
or
[attr.aria-label]="'Product details for ' + productDetails?.ProductName"
Examples here: https://stackblitz.com/edit/angular-aria-label?embed=1&file=src/app/app.component.html&hideExplorer=1
Ps. As @Simon_Weaver mentioned, there are some components that implements its own aria-label @Input, like mat-select.
See his answer here Angular Material mat-label accessibility
You should use square brackets ([ ]) around the target property:
[attr.aria-label]="'Product details for' + productDetails?.ProductName"
Also this could be further checked if ProductName in productDetails is null or undefined as
[attr.aria-label]="(typeof productDetails.ProductName !== 'undefined') ?
'Product details for ' + productDetails.ProductName : '' "
So that the JAWS/NVDA/Narrator could able to read if it's value is present or not..