🎨 improve buttonlinks semantics

equinor · Feb 5, 2024 · f391bda · f391bda
1 parent 08620eb
commit f391bda
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/web/components/src/Link/ButtonLink.tsx b/web/components/src/Link/ButtonLink.tsx
@@ -29,11 +29,18 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(functio
   ref,
 ) {
   return (
-    /* legacy needed here to avoid 2 anchor tags */
-    <NextLink href={href} locale={locale} passHref legacyBehavior>
-      <StyledButtonLink color="secondary" variant="outlined" ref={ref} {...rest}>
-        {children}
-      </StyledButtonLink>
-    </NextLink>
+    <StyledButtonLink
+      locale={locale}
+      forwardedAs={NextLink}
+      href={{
+        pathname: href,
+      }}
+      color="secondary"
+      variant="outlined"
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </StyledButtonLink>
   )
 })
diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx
@@ -3,7 +3,7 @@ import styled, { createGlobalStyle } from 'styled-components'
 import { CSSProperties } from 'react'
 import { useRouter } from 'next/router'
 import { default as NextLink } from 'next/link'
-import { Topbar, Button, BackgroundContainer } from '@components'
+import { Topbar, BackgroundContainer, Button } from '@components'
 import { AllSlugsType, LocalizationSwitch } from './LocalizationSwitch'
 import type { MenuData, SimpleMenuData } from '../../types/types'
 import SiteMenu from './siteMenu/SiteMenu'
@@ -12,17 +12,12 @@ import { Flags } from '../../common/helpers/datasetHelpers'
 import { LogoLink } from './LogoLink'
 import { languages, defaultLanguage } from '../../languages'
 import { FormattedMessage } from 'react-intl'
-import { Icon } from '@equinor/eds-core-react'
 import { search } from '@equinor/eds-icons'
 import { getLocaleFromName, getNameFromLocale } from '../../lib/localization'
 import Head from 'next/head'
 import getConfig from 'next/config'
 import { getAllSitesLink } from '../../common/helpers/getAllSitesLink'
-
-const StyledSearchButton = styled(Button)`
-  color: var(--default-text);
-  fill: var(--default-text);
-`
+import { Icon } from '@equinor/eds-core-react'
 
 const TopbarOffset = createGlobalStyle`
   body {
@@ -172,12 +167,25 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
             >
               {hasSearch && (
                 <ControlChild>
-                  {/* legacy needed here to avoid 2 anchor tags */}
-                  <NextLink href="/search" passHref legacyBehavior>
-                    <StyledSearchButton variant="ghost_icon" aria-expanded="true" aria-label="Search">
-                      <Icon size={24} data={search} />
-                    </StyledSearchButton>
-                  </NextLink>
+                  <Button
+                    variant="ghost_icon"
+                    aria-expanded="true"
+                    aria-label="Search"
+                    forwardedAs={NextLink}
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    //@ts-ignore
+                    href={{
+                      pathname: '/search',
+                    }}
+                    style={
+                      {
+                        color: 'var(--default-text)',
+                        fill: 'var(--default-text)',
+                      } as CSSProperties
+                    }
+                  >
+                    <Icon size={24} data={search} />
+                  </Button>
                 </ControlChild>
               )}
               {hasMoreThanOneLanguage && (