AI Implementation feature(909): Challenges Page and Challenge Solve Modal 1.05 (#51)

frontend/src/app/features/challenges/challenge-card.component.ts

@@ -15,6 +15,9 @@ import { BoardCard } from './challenges.pure';
       border-radius: var(--radius-sm, 4px); background: var(--color-surface, #1c1f26);
       cursor: pointer; transition: transform 0.1s ease;
       min-height: 96px;
+      text-align: left;
+      color: inherit;
+      font: inherit;
     }
     .card:hover { transform: translateY(-1px); border-color: var(--color-primary, #3b82f6); }
     .card.solved { border-color: var(--color-success, #22c55e); }
@@ -32,16 +35,25 @@ import { BoardCard } from './challenges.pure';
     .diff-HIGH { background: rgba(239,68,68,0.18); color: #dc2626; }
   `],
   template: `
-    <div
+    <button
+      type="button"
       class="card"
       [class.solved]="card.solvedByMe"
       [attr.data-testid]="'challenge-card-' + card.id"
+      [attr.data-solved]="card.solvedByMe ? 'true' : 'false'"
+      [attr.aria-label]="'Challenge ' + card.name + (card.solvedByMe ? ', solved' : ', not solved')"
+      [attr.aria-pressed]="card.solvedByMe"
       (click)="open.emit(card.id)"
     >
       <div class="card-head">
         <img *ngIf="card.categoryIconPath" class="icon" [src]="card.categoryIconPath" [alt]="card.categoryAbbreviation" />
         <span class="name">{{ card.name }}</span>
-        <span *ngIf="card.solvedByMe" class="check" aria-label="Solved">✓</span>
+        <span
+          *ngIf="card.solvedByMe"
+          class="check"
+          [attr.data-testid]="'challenge-check-' + card.id"
+          aria-hidden="true"
+        >✓</span>
       </div>
       <div class="meta">
         <span class="diff" [class]="'diff-' + card.difficulty">{{ card.difficulty }}</span>
@@ -49,7 +61,7 @@ import { BoardCard } from './challenges.pure';
         <span>·</span>
         <span>{{ card.solveCount }} solve<span *ngIf="card.solveCount !== 1">s</span></span>
       </div>
-    </div>
+    </button>
   `,
 })
 export class ChallengeCardComponent {