fix(a11y): toggle state, valid markup, focus-visible actions + tsx highlight

- M9: add aria-pressed to framework toggle buttons and role=group/aria-label
  on the selection bar so screen readers announce selected state.
- M11: remove the interactive <button> nested inside the contribute <a>
  (invalid HTML, two overlapping interactive roles for one action).
- F15: demote the per-framework label from h3 to h4 so headings nest
  h2 (section) > h3 (snippet) > h4 (framework) instead of duplicate h3s.
- F17: reveal the editor's edit/copy actions on group-focus-within, not just
  group-hover, so they're reachable by keyboard and touch.
- F9: alias Ripple .tsrx to tsx (not jsx) in Shiki to keep TS typing.

Author: matschik

build/lib/highlighter.ts

@@ -31,7 +31,7 @@ async function getHighlighter(): Promise<HighlighterGeneric<BundledLanguage, Bun
         "angular-html",
       ],
       langAlias: {
-        tsrx: "jsx",
+        tsrx: "tsx",
       },
     });
   }

src/Index.svelte

@@ -244,6 +244,8 @@
       class="flex px-6 lg:px-20 py-2 sticky top-0 z-20 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto"
       data-framework-id-selected-list={frameworkIdsSelectedArr.join(",")}
       data-testid="framework-selection-bar"
+      role="group"
+      aria-label="Select frameworks to compare"
     >
       {#each headerFrameworks as framework (framework.id)}
         {#if framework}
@@ -258,6 +260,7 @@
                 : "opacity-70 border-opacity-50 border-gray-700",
             ]}
             data-testid={`framework-button-${framework.id}`}
+            aria-pressed={frameworkIdsSelected.has(framework.id)}
             onclick={() => {
               toggleFrameworkId(framework.id);
               if (frameworkIdsSelectedArr.length === 0) {
@@ -356,12 +359,12 @@
                                 data-testid={`framework-snippet-${frameworkId}-${snippet.snippetId}`}
                               >
                                 <div class="flex justify-between items-center space-x-3">
-                                  <h3
+                                  <h4
                                     class="m-0"
                                     data-testid={`framework-title-${frameworkId}-${snippet.snippetId}`}
                                   >
                                     <FrameworkLabel id={framework.id} />
-                                  </h3>
+                                  </h4>
                                   {#if frameworkSnippet}
                                     <div class="flex items-center space-x-3">
                                       {#if frameworkSnippet.playgroundURL}
@@ -421,13 +424,11 @@
                                                 href={frameworkSnippet.snippetEditHref}
                                                 data-testid={`contribute-link-${frameworkId}-${snippet.snippetId}`}
                                               >
-                                                <button class="flex items-center space-x-3">
-                                                  <span>Contribute on Github</span>
-                                                  <span
-                                                    class="iconify simple-icons--github size-5"
-                                                    aria-hidden="true"
-                                                  ></span>
-                                                </button>
+                                                <span>Contribute on Github</span>
+                                                <span
+                                                  class="iconify simple-icons--github size-5"
+                                                  aria-hidden="true"
+                                                ></span>
                                               </a>
                                             </div>
                                           </div>

src/components/CodeEditor.svelte

@@ -59,7 +59,9 @@
       {@html snippet.contentHtml}
     {/if}
   </div>
-  <div class="absolute hidden group-hover:block transition-all top-0 right-0 mt-2 mr-2">
+  <div
+    class="absolute hidden group-hover:block group-focus-within:block transition-all top-0 right-0 mt-2 mr-2"
+  >
     <div class="flex items-center space-x-3">
       <a
         href={snippetEditHref}