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

Author: star7js

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>