fix links are not crawable

components/layout/header.js

@@ -31,9 +31,9 @@ const Header = ({ url }) => {
         <div className="header-container">
           <h1 className="header-logo">
             <Link href="/" prefetch={false}>
-              
+
                 Open Timber Portal
-              
+
             </Link>
             {process.env.ENV === 'staging' && (
               <span className="header-logo-staging">Staging</span>
@@ -47,7 +47,7 @@ const Header = ({ url }) => {
                 <Search theme={theme} />
               </li>
               <li>
-                <UserDropdown theme={theme} />
+                <UserDropdown theme={theme} className="header-nav-list-item" />
               </li>
               <li>
                 <LanguageDropdown className="header-nav-list-item" showSelectedCode />

components/ui/dropdown.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -14,12 +14,13 @@ const DropdownContent = (props) => {
 }
 
 const DropdownTrigger = (props) => {
-  const { children, className, ...dropdownTriggerProps } = props;
+  const { children, ...dropdownTriggerProps } = props;
+  const className = classNames('dropdown__trigger', props.className);
 
   return (
-    <a {...dropdownTriggerProps} className={`dropdown__trigger ${className}`}>
+    <div role="button" {...dropdownTriggerProps} className={className}>
       {children}
-    </a>
+    </div>
   );
 }
 

components/ui/user-dropdown.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 import dynamic from 'next/dynamic';
 
@@ -16,10 +17,12 @@ import Icon from 'components/ui/icon';
 
 const Login = dynamic(() => import('components/ui/login'), { ssr: false });
 
-const UserDropdown = ({ intl, user, displayIcon, theme }) => {
+const UserDropdown = ({ intl, user, displayIcon, className, theme }) => {
   if (!user.token) {
     return (
-      <a
+      <div
+        className={className}
+        role="button"
         onClick={() => {
           modal.toggleModal(true, {
             children: Login
@@ -28,13 +31,13 @@ const UserDropdown = ({ intl, user, displayIcon, theme }) => {
       >
         {displayIcon && <Icon name="icon-user" />}
         <span>{intl.formatMessage({ id: 'signin' })}</span>
-      </a>
+      </div>
     )
   }
 
   return (
     <Dropdown
-      className={`c-account-dropdown ${theme}`}
+      className={cx('c-account-dropdown', theme, className)}
     >
       <DropdownTrigger>
         <div className="header-nav-list-item">

e2e/cypress/e2e/operator.cy.js

@@ -14,7 +14,7 @@ describe('Operator', function () {
 
     describe('updating operator profile', function () {
       beforeEach(function () {
-        cy.get('a').contains('My account').click();
+        cy.get('div[role=button]').contains('My account').click();
         cy.get('a').contains('Producer profile').click();
         cy.location('pathname', {timeout: 25000}).should('include', '/operator/edit');
       })
@@ -50,7 +50,7 @@ describe('Operator', function () {
 
     describe('documentation', function () {
       beforeEach(function () {
-        cy.get('a').contains('My account').click();
+        cy.get('div[role=button]').contains('My account').click();
         cy.contains('a', 'IFO / Interholco').click();
         cy.location('pathname', {timeout: 25000}).should('include', '/documentation');
       })

e2e/cypress/e2e/pages.cy.js

@@ -2,7 +2,7 @@ describe('Pages', () => {
   describe('Login page', () => {
     it('matches visually', function () {
       cy.visit('/');
-      cy.get('a').contains('Sign in').click();
+      cy.get('div[role=button]').contains('Sign in').click();
       cy.get('.c-login').matchImage();
     });
   })

e2e/cypress/e2e/password-reset.cy.js

@@ -5,7 +5,7 @@ describe('Password Reset', () => {
 
   describe('Forgot password form', () => {
     it('user can ask for password reset', function () {
-      cy.get('a').contains('Sign in').click();
+      cy.get('div[role=button]').contains('Sign in').click();
       cy.get('button').contains('Reset your password').click();
       cy.get('#input-email').type('[email protected]');
       cy.get('button').contains('Reset Password').click();

e2e/cypress/e2e/user.cy.js

@@ -10,33 +10,33 @@ describe('User', () => {
   context('Login form', () => {
     it('can log in', function () {
       cy.visit('/');
-      cy.get('a').contains('Sign in').click();
+      cy.get('div[role=button]').contains('Sign in').click();
       cy.get('#input-email').type('[email protected]');
       cy.get('#input-password').type('wrongpassword');
       cy.get('button').contains('Log in').click();
       cy.get('.rrt-text').should('have.text', 'Wrong email or password');
       cy.get('#input-password').clear().type('Supersecret1');
       cy.get('button').contains('Log in').click();
-      cy.contains('a', 'My account');
+      cy.contains('div[role=button]', 'My account');
     });
   })
 
   context('Public user', () => {
     it('can log in and out', function () {
       cy.login('[email protected]', 'Supersecret1');
-      cy.get('a').contains('My account').click();
+      cy.get('div[role=button]').contains('My account').click();
       cy.get('a').contains('My profile').click();
       cy.get('#input-firstName').should('have.value', 'Operator');
       cy.get('#input-lastName').should('have.value', 'User');
-      cy.get('a').contains('My account').click();
-      cy.get('a').contains('Sign out').click();
-      cy.get('a').contains('Sign in').should('exist')
-      cy.get('a').contains('My account').should('not.exist')
+      cy.get('div[role=button]').contains('My account').click();
+      cy.get('div[role=button]').contains('Sign out').click();
+      cy.get('div[role=button]').contains('Sign in').should('exist')
+      cy.get('div[role=button]').contains('My account').should('not.exist')
     });
 
     it('can create account', function () {
       cy.visit('/');
-      cy.get('a').contains('Sign in').click();
+      cy.get('div[role=button]').contains('Sign in').click();
       cy.get('a').contains('Register now').click();
       cy.selectOption('[name=country_id]', 'Co', 'Congo');
       cy.selectOption('[name=operator_id]', 'Si', 'SIFCO');
@@ -62,7 +62,7 @@ describe('User', () => {
 
     it('can create producer', function () {
       cy.visit('/');
-      cy.get('a').contains('Sign in').click();
+      cy.get('div[role=button]').contains('Sign in').click();
       cy.get('a').contains('Register new producer').click();
 
       cy.get('#input-name').type('Super New Producer');

e2e/cypress/support/commands.js

@@ -15,11 +15,11 @@ Cypress.Commands.add('login', (username, password) => {
     [username, password],
     () => {
       cy.visit('/');
-      cy.get('a').contains('Sign in').click();
+      cy.get('div[role=button]').contains('Sign in').click();
       cy.get('#input-email').type(username);
       cy.get('#input-password').type(password);
       cy.get('button').contains('Log in').click();
-      cy.get('a').contains('My account').should('exist');
+      cy.get('div[role=button]').contains('My account').should('exist');
     },
     {
       cacheAcrossSpecs: true