a11y: screen reader and keyboard improvements

- Audio player: aria-labels for Play/Pause, Loop, Mute, Close; labelled playback and volume sliders
- Generation: aria-labels for Generate speech and Fine tune instructions buttons
- Voice cards: focusable, labelled, Enter/Space to select
- History rows: focusable, labelled, Enter/Space to play; transcript textarea labelled
- Voices tab: focusable rows, labelled, Enter/Space to edit; Actions button labelled
- Model management: focusable model rows and labelled Download/Delete buttons
- Server tab: regions with aria-label and tabIndex for Connection, Status, App Updates
- Stories: focusable story rows, labelled, Enter/Space to select; Actions and track editor buttons labelled
- Voice profile samples: Play/Pause/Stop and mini-player slider labelled

Tested with NVDA and Narrator on Windows. See docs/PR-ACCESSIBILITY.md for full description.

Made-with: Cursor

app/src/components/History/HistoryTable.tsx

@@ -253,10 +253,17 @@ export function HistoryTable() {
               return (
                 <div
                   key={gen.id}
+                  role="button"
+                  tabIndex={0}
                   className={cn(
                     'flex items-stretch gap-4 h-26 border rounded-md p-3 bg-card hover:bg-muted/70 transition-colors text-left w-full',
                     isCurrentlyPlaying && 'bg-muted/70',
                   )}
+                  aria-label={
+                    isCurrentlyPlaying
+                      ? `Sample from ${gen.profile_name}, ${formatDuration(gen.duration)}, ${formatDate(gen.created_at)}. Playing. Press Enter to restart.`
+                      : `Sample from ${gen.profile_name}, ${formatDuration(gen.duration)}, ${formatDate(gen.created_at)}. Press Enter to play.`
+                  }
                   onMouseDown={(e) => {
                     // Don't trigger play if clicking on textarea or if text is selected
                     const target = e.target as HTMLElement;
@@ -265,6 +272,14 @@ export function HistoryTable() {
                     }
                     handlePlay(gen.id, gen.text, gen.profile_id);
                   }}
+                  onKeyDown={(e) => {
+                    const target = e.target as HTMLElement;
+                    if (target.closest('textarea')) return;
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      handlePlay(gen.id, gen.text, gen.profile_id);
+                    }
+                  }}
                 >
                   {/* Waveform icon */}
                   <div className="flex items-center shrink-0">
@@ -293,6 +308,7 @@ export function HistoryTable() {
                       value={gen.text}
                       className="flex-1 resize-none text-sm text-muted-foreground select-text"
                       readOnly
+                      aria-label={`Transcript for sample from ${gen.profile_name}, ${formatDuration(gen.duration)}`}
                     />
                   </div>