Improve Accessibility by Improve Level Card Button Label

src/app/components/level-card/level-card.html

@@ -13,10 +13,10 @@
 </section>
 
 <section class="buttons">
-  <button [aria-label]="translation.common.preview">
+  <button [aria-label]="previewButtonLabel()">
     <div class="material-symbols-outlined icon-40 button-icon">play_arrow</div>
   </button>
-  <button [aria-label]="translation.common.download">
+  <button [aria-label]="downloadButtonLabel()">
     <div class="material-symbols-outlined icon-40 button-icon">download</div>
   </button>
 </section>

src/app/components/level-card/level-card.ts

@@ -7,15 +7,29 @@ import { TranslationService } from '../../services/translation.service';
   templateUrl: './level-card.html',
   styleUrl: './level-card.scss',
   host: {
-    tabindex: '0',
+    role: 'article',
   },
 })
 export class LevelCard {
-  protected translation = inject(TranslationService).translation;
+  private translationSvc = inject(TranslationService);
+  protected translation = this.translationSvc.translation;
 
   artist = input.required<string>();
   trackName = input.required<string>();
   creator = input<string[]>([]);
 
   creatorString = computed(() => this.creator().join(' & '));
+
+  previewButtonLabel = computed(() =>
+    this.translationSvc.interpolate(this.translation.levelCard.preview, {
+      artist: this.artist(),
+      trackName: this.trackName(),
+    }),
+  );
+
+  downloadButtonLabel = computed(() =>
+    this.translationSvc.interpolate(this.translation.levelCard.download, {
+      creator: this.creatorString()
+    }),
+  );
 }