Merge pull request #1784 from hypothesis/a11y-login-links

Convert ‘Log in’ and ‘Sign up’ links to `Button` components

src/sidebar/components/test/top-bar-test.js

@@ -158,16 +158,14 @@ describe('TopBar', () => {
         onSignUp,
       });
       const loginText = getLoginText(wrapper);
-      const links = loginText.find('a');
-      assert.equal(links.length, 2);
+      const loginButtons = loginText.find('Button');
+      assert.equal(loginButtons.length, 2);
 
-      assert.equal(links.at(0).text(), 'Sign up');
-      links.at(0).simulate('click');
-      assert.called(onSignUp);
+      assert.equal(loginButtons.at(0).props().buttonText, 'Sign up');
+      assert.equal(loginButtons.at(0).props().onClick, onSignUp);
 
-      assert.equal(links.at(1).text(), 'Log in');
-      links.at(1).simulate('click');
-      assert.called(onLogin);
+      assert.equal(loginButtons.at(1).props().buttonText, 'Log in');
+      assert.equal(loginButtons.at(1).props().onClick, onLogin);
     });
 
     it('Shows user menu when logged in', () => {

src/sidebar/components/top-bar.js

@@ -72,16 +72,19 @@ function TopBar({
       )}
       {auth.status === 'logged-out' && (
         <span className="top-bar__login-links">
-          {/* FIXME-A11Y */}
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#" onClick={onSignUp} target="_blank" style={loginLinkStyle}>
-            Sign up
-          </a>{' '}
-          / {/* FIXME-A11Y */}
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#" onClick={onLogin} style={loginLinkStyle}>
-            Log in
-          </a>
+          <Button
+            className="top-bar__login-button"
+            buttonText="Sign up"
+            onClick={onSignUp}
+            style={loginLinkStyle}
+          />{' '}
+          /
+          <Button
+            className="top-bar__login-button"
+            buttonText="Log in"
+            onClick={onLogin}
+            style={loginLinkStyle}
+          />
         </span>
       )}
       {auth.status === 'logged-in' && (

src/styles/sidebar/components/top-bar.scss

@@ -40,10 +40,20 @@
   border-bottom: none;
 }
 
-.top-bar__login-links {
-  flex-shrink: 0;
+.top-bar__login-button.button {
+  padding: 0 0.25em;
+  background-color: transparent;
+  color: var.$brand;
   font-size: var.$body2-font-size;
-  padding-left: 5px;
+  font-weight: 400;
+
+  &:hover {
+    color: var.$link-color-hover;
+  }
+}
+
+.top-bar__login-links {
+  display: flex;
 }
 
 .top-bar__inner {