Add ARIA attributes to card appearance toggle buttons

Adds role="group" + aria-label to the .card-theme-row and aria-pressed
state to each button, kept in sync by applyCardTheme(). This addresses
the accessibility issue raised in #53.

https://claude.ai/code/session_019mFhzJHWmUB8cTbLksb6ev

Author: claude

assets/js/app.js

@@ -90,7 +90,9 @@ function applyCardTheme(themeName) {
     }
 
     elements.cardThemeButtons.forEach((btn) => {
-        btn.classList.toggle('active', btn.dataset.cardTheme === themeName);
+        const isActive = btn.dataset.cardTheme === themeName;
+        btn.classList.toggle('active', isActive);
+        btn.setAttribute('aria-pressed', String(isActive));
     });
 }
 

index.html

@@ -71,10 +71,10 @@ <h1>GitHub Social <span>Preview</span></h1>
         <button class="template-btn" data-platform="desktop">Desktop</button>
     </div>
 
-    <div class="card-theme-row">
+    <div class="card-theme-row" role="group" aria-label="Card appearance">
         <span class="card-theme-label">Appearance</span>
-        <button class="template-btn active" data-card-theme="dark">Dark</button>
-        <button class="template-btn" data-card-theme="light">Light</button>
+        <button class="template-btn active" data-card-theme="dark" aria-pressed="true">Dark</button>
+        <button class="template-btn" data-card-theme="light" aria-pressed="false">Light</button>
     </div>
 
     <div class="dl-row">