From e01e628d9407499e9af956cb1a6226b7065a43ca Mon Sep 17 00:00:00 2001
From: copecone <controld3785@gmail.com>
Date: Mon, 4 May 2026 00:10:04 +0900
Subject: [PATCH] Improve Accessibility by Improve Level Card Button Label

---
 src/app/components/level-card/level-card.html |  4 ++--
 src/app/components/level-card/level-card.ts   | 18 ++++++++++++++++--
 src/app/i18n/en.ts                            |  6 ++++--
 src/app/i18n/jp.ts                            |  6 ++++--
 src/app/i18n/kr.ts                            |  6 ++++--
 src/app/services/translation.service.ts       | 10 ++++++++++
 6 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/app/components/level-card/level-card.html b/src/app/components/level-card/level-card.html
index 18b995f..6f1c178 100644
--- a/src/app/components/level-card/level-card.html
+++ b/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>
diff --git a/src/app/components/level-card/level-card.ts b/src/app/components/level-card/level-card.ts
index 0d59a73..db0c717 100644
--- a/src/app/components/level-card/level-card.ts
+++ b/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()
+    }),
+  );
 }
diff --git a/src/app/i18n/en.ts b/src/app/i18n/en.ts
index 502f19e..9d8a7ca 100644
--- a/src/app/i18n/en.ts
+++ b/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",
   },
 };
 
diff --git a/src/app/i18n/jp.ts b/src/app/i18n/jp.ts
index fe660af..ac7a06d 100644
--- a/src/app/i18n/jp.ts
+++ b/src/app/i18n/jp.ts
@@ -24,7 +24,9 @@ export const JP: Translation = {
     close: '閉じる',
     save: '保存',
     skipToContent: '本文へスキップ',
-    preview: '楽曲プレビュー',
-    download: 'ダウンロード',
+  },
+  levelCard: {
+    preview: '{{artist}}の{{trackName}} プレビュー',
+    download: '{{creator}}のレベルをダウンロード',
   },
 };
diff --git a/src/app/i18n/kr.ts b/src/app/i18n/kr.ts
index 56ae8c3..fcdd271 100644
--- a/src/app/i18n/kr.ts
+++ b/src/app/i18n/kr.ts
@@ -24,7 +24,9 @@ export const KR: Translation = {
     close: '닫기',
     save: '저장',
     skipToContent: '본문으로 건너뛰기',
-    preview: '곡 프리뷰',
-    download: '다운로드',
+  },
+  levelCard: {
+    preview: '{{artist}}의 {{trackName}} 미리듣기',
+    download: `{{creator}}의 레벨 다운로드`,
   },
 };
diff --git a/src/app/services/translation.service.ts b/src/app/services/translation.service.ts
index 9fec3a0..f6b9877 100644
--- a/src/app/services/translation.service.ts
+++ b/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
+    );
+  }
 }