From de5eeda1b63e06740be9f71ff802310d91c36f93 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 | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/anonymous.jsx b/src/components/anonymous.jsx
index 81870cf4..c9769b31 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>