From 6275b24b4656fe5ab4995286fa4e5d238a9b1f12 Mon Sep 17 00:00:00 2001
From: star7js <126814341+star7js@users.noreply.github.com>
Date: Sat, 28 Mar 2026 14:43:29 -0600
Subject: [PATCH] sign in: fix keyboard accessibility for all buttons

- Apple sign-in and demo buttons used <a onClick> without href, making
  them unreachable via Tab key. Added href="#" and role="button" with
  preventDefault so they're keyboard-focusable.
- Added focus-visible outline styling to sign-in buttons so keyboard
  users can see which button is focused.

Fixes #551
---
 src/components/anonymous.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/anonymous.jsx b/src/components/anonymous.jsx
index 81870cf4..0746cf86 100644
--- a/src/components/anonymous.jsx
+++ b/src/components/anonymous.jsx
@@ -79,6 +79,10 @@ const styles = () => ({
     '&:hover': {
       background: '#eee',
     },
+    '&:focus-visible': {
+      outline: '2px solid #fff',
+      outlineOffset: 2,
+    },
   },
   buttonText: {
     fontSize: 18,
@@ -148,7 +152,7 @@ class AnonymousLanding extends Component {
             <img className={classes.buttonImage} src={AuthGoogleIcon} alt="" />
             <Typography className={classes.buttonText}>Sign in with Google</Typography>
           </a>
-          <a onClick={() => AppleID.auth.signIn()} className={classes.logInButton}>
+          <a href="#" role="button" onClick={(e) => { e.preventDefault(); AppleID.auth.signIn(); }} className={classes.logInButton}>
             <img className={classes.buttonImage} src={AuthAppleIcon} alt="" />
             <Typography className={classes.buttonText}>Sign in with Apple</Typography>
           </a>
@@ -162,7 +166,7 @@ class AnonymousLanding extends Component {
             paired your comma device.
           </span>
 
-          <a onClick={loginAsDemoUser}
+          <a href="#" role="button" onClick={(e) => { e.preventDefault(); loginAsDemoUser(); }}
             className="flex items-center pl-4 pr-3 py-2 font-medium border border-white rounded-full hover:bg-[rgba(255,255,255,0.1)] active:bg-[rgba(255,255,255,0.2)] transition-colors"
             style={{ height: 0, overflow: 'hidden', opacity: 0 }}
           >