From 49878077a00d06332a7f37f3a0708a9efb39d79e Mon Sep 17 00:00:00 2001
From: Agriya Khetarpal <74401230+agriyakhetarpal@users.noreply.github.com>
Date: Tue, 17 Dec 2024 04:20:51 +0530
Subject: [PATCH] Initial attempt

---
 docs/_static/try_examples.css             |  3 ++
 jupyterlite_sphinx/jupyterlite_sphinx.css |  6 ++++
 jupyterlite_sphinx/jupyterlite_sphinx.py  | 36 ++++++++++++++---------
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/docs/_static/try_examples.css b/docs/_static/try_examples.css
index b99819e..9e9ec07 100644
--- a/docs/_static/try_examples.css
+++ b/docs/_static/try_examples.css
@@ -4,6 +4,9 @@
 }
 
 .try_examples_button {
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
   background-color: var(--jupyter-light-primary);
   border: none;
   padding: 5px 10px;
diff --git a/jupyterlite_sphinx/jupyterlite_sphinx.css b/jupyterlite_sphinx/jupyterlite_sphinx.css
index ca5d462..c17b869 100644
--- a/jupyterlite_sphinx/jupyterlite_sphinx.css
+++ b/jupyterlite_sphinx/jupyterlite_sphinx.css
@@ -75,3 +75,9 @@
     display: none;
   }
 }
+
+a.try_examples_button {
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+}
diff --git a/jupyterlite_sphinx/jupyterlite_sphinx.py b/jupyterlite_sphinx/jupyterlite_sphinx.py
index 281117e..bc37e05 100644
--- a/jupyterlite_sphinx/jupyterlite_sphinx.py
+++ b/jupyterlite_sphinx/jupyterlite_sphinx.py
@@ -143,9 +143,10 @@ def __init__(
 
     def html(self):
         return (
-            '<button class="try_examples_button" '
-            f"onclick=\"window.open('{self.lab_src}')\">"
-            f"{self.button_text}</button>"
+            f'<a href="{self.lab_src}" '
+            'target="_blank" rel="noopener noreferrer" '
+            'class="try_examples_button" style="text-decoration: none; display: inline-block; color: inherit;">'
+            f"{self.button_text}</a>"
         )
 
 
@@ -322,9 +323,10 @@ def __init__(
 
     def html(self):
         return (
-            '<button class="try_examples_button" '
-            f"onclick=\"window.open('{self.lab_src}')\">"
-            f"{self.button_text}</button>"
+            f'<a href="{self.lab_src}" '
+            'target="_blank" rel="noopener noreferrer" '
+            'class="try_examples_button" style="text-decoration: none; display: inline-block; color: inherit;">'
+            f"{self.button_text}</a>"
         )
 
 
@@ -675,17 +677,23 @@ def run(self):
 
         # Button with the onclick event to swap embedded notebook back to examples.
         go_back_button_html = (
-            '<button class="try_examples_button" '
-            f"onclick=\"window.tryExamplesHideIframe('{examples_div_id}',"
-            f"'{iframe_parent_div_id}')\">"
-            "Go Back</button>"
+            '<a href="#" '
+            'role="button" '
+            'aria-label="Return to original content and close the examples frame" '
+            f'onclick="window.tryExamplesHideIframe(\'{examples_div_id}\', '
+            f'\'{iframe_parent_div_id}\'); return false;" '
+            'class="try_examples_button" '
+            'style="text-decoration: none; display: inline-block;">'
+            'Go Back</a>'
         )
 
+
         full_screen_button_html = (
-            '<button class="try_examples_button" '
-            f"onclick=\"window.openInNewTab('{examples_div_id}',"
-            f"'{iframe_parent_div_id}')\">"
-            "Open In Tab</button>"
+            f'<a href="{iframe_src}" '
+            'target="_blank" rel="noopener noreferrer" '
+            'class="try_examples_button" '
+            'style="text-decoration: none; display: inline-block;">'
+            "Open In Tab</a>"
         )
 
         # Button with the onclick event to swap examples with embedded notebook.