From b374d6d42232d56dc4ae9bdc451080dcfb832b4e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 23 Feb 2026 02:46:04 +0000
Subject: [PATCH] Refactor TranscriptViewer to use button for deep link action

This change improves accessibility by replacing the anchor tag (`<a>`) used for the "Open in VLC" action with a semantic `<button>` element.

The button is styled to visually match the previous implementation (icon-only, no background/border) but provides correct semantics for an action that triggers a custom protocol handler rather than standard navigation.

- Replaced `<a>` with `<button type="button">`
- Added styles to reset button appearance
- Preserved `onClick` handler logic

Co-authored-by: alfieprojectsdev <11991855+alfieprojectsdev@users.noreply.github.com>
---
 field-logic/src/components/TranscriptViewer.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/field-logic/src/components/TranscriptViewer.tsx b/field-logic/src/components/TranscriptViewer.tsx
index 9929047..54d1057 100644
--- a/field-logic/src/components/TranscriptViewer.tsx
+++ b/field-logic/src/components/TranscriptViewer.tsx
@@ -57,14 +57,21 @@ export const TranscriptViewer: React.FC<Props> = ({ data }) => {
                             </button>
 
                             {/* Secondary: VLC Deep Link */}
-                            <a
-                                href="#"
+                            <button
+                                type="button"
                                 onClick={(e) => handleDeepLink(e, seg.start)}
                                 title="Open in VLC"
-                                style={{ textDecoration: 'none' }}
+                                style={{
+                                    textDecoration: 'none',
+                                    background: 'none',
+                                    border: 'none',
+                                    padding: 0,
+                                    font: 'inherit',
+                                    cursor: 'pointer'
+                                }}
                             >
                                 🚀
-                            </a>
+                            </button>
                         </div>
                     </div>
                 ))}