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()
+    }),
+  );
 }

src/app/i18n/en.ts

@@ -22,8 +22,10 @@ export const EN = {
     close: 'Close',
     save: 'Save',
     skipToContent: 'Skip to main content',
-    preview: 'Soundtrack Preview',
-    download: 'Download',
+  },
+  levelCard: {
+    preview: '{{trackName}} by {{artist}} Preview',
+    download: "{{creator}}'s Level Download",
   },
 };
 

src/app/i18n/jp.ts

@@ -24,7 +24,9 @@ export const JP: Translation = {
     close: '閉じる',
     save: '保存',
     skipToContent: '本文へスキップ',
-    preview: '楽曲プレビュー',
-    download: 'ダウンロード',
+  },
+  levelCard: {
+    preview: '{{artist}}の{{trackName}} プレビュー',
+    download: '{{creator}}のレベルをダウンロード',
   },
 };

src/app/i18n/kr.ts

@@ -24,7 +24,9 @@ export const KR: Translation = {
     close: '닫기',
     save: '저장',
     skipToContent: '본문으로 건너뛰기',
-    preview: '곡 프리뷰',
-    download: '다운로드',
+  },
+  levelCard: {
+    preview: '{{artist}}의 {{trackName}} 미리듣기',
+    download: `{{creator}}의 레벨 다운로드`,
   },
 };

src/app/services/translation.service.ts

@@ -29,4 +29,14 @@ export class TranslationService {
   readonly translation = new Proxy({} as Translation, {
     get: (_, prop) => this._translation()[prop as keyof Translation]
   });
+
+  /**
+   * 문자열 내의 플레이스홀더(예: {{name}})를 실제 값으로 치환합니다.
+   */
+  interpolate(text: string, params: Record<string, string | number>): string {
+    return Object.entries(params).reduce(
+      (acc, [key, value]) => acc.replace(new RegExp(`{{${key}}}`, 'g'), String(value)),
+      text
+    );
+  }
 }