I have created a star rating component and I want to include a description for screen readers like JAWS to read when tabbed. Currently, when using JAWS, there is no description being read (it should ideally read the rating for the user). What is the process for adding aria-labels to angular components?
star-rating.component.ts
<div [attr.aria-label]="'the rating is' + {{rating}} + 'out of' + {{starAmount}} + 'stars'">
<app-star
*ngFor="let star of stars; let i = index"
[rating]="rating"
[starAmount]="starAmount">
</app-star>
<div>
star-rating.component.ts
import { Component, Input } from "@angular/core";
@Component({
selector: "app-star-rating",
templateUrl: "./star-rating.component.html",
styleUrls: ["./star-rating.component.css"]
})
export class StarRatingComponent {
@Input() starAmount;
@Input() rating;
total;
Arr = Array;
}