a11y issues with Storefront (#902)

* 🐛 Remove link as the linked page is in draft

* ✏️ Fix dead link

* 🐛 Try to fix duplicate title bug

I'm not sure if we added the SEO in wrapper for a reason back in August, didn't dare to delete it yet...

* ✏️ Did work locally, but failed on CI. Case issue?

apps/storefront/docs/guidelines/spacing/overview.mdx

@@ -55,7 +55,7 @@ There are eight spacers to choose between: `XX Small`, `X Small`, `Small`, `Medi
 
 ## Using with components
 
-Visit [spacing usage](https://eds.equinor.com/patterns/spacing-usage/) for more details on on how to use spacing together with components.  
+<!-- Visit [spacing usage](https://eds.equinor.com/patterns/spacing-usage/) for more details on on how to use spacing together with components.  -->
 
 <FigmaImage
   url="https://www.figma.com/file/0TbIXrrObWj80Cf7KucKYFL0/Design-Tokens?node-id=239%3A1"

apps/storefront/gatsby-config.js

@@ -17,7 +17,7 @@ module.exports = {
         mdPlugins: [remarkEmoji],
       },
     },
-    `gatsby-plugin-react-helmet`,
+
     {
       resolve: `gatsby-source-filesystem`,
       options: {

apps/storefront/src/data/component-status/component-status.yaml

@@ -131,7 +131,7 @@ components:
         - *4
       react:
         - *4
-  - component: 'Navigation Navigation drawer'
+  - component: 'Navigation drawer'
     status:
       documentation:
         - *4

apps/storefront/src/gatsby-theme-docz/base/Seo.js

@@ -0,0 +1,95 @@
+/**
+ * SEO component that queries for data with
+ *  Gatsby's useStaticQuery React hook
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+/* eslint import/no-default-export: off */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Helmet } from 'react-helmet-async'
+import { useStaticQuery, graphql } from 'gatsby'
+
+function SEO({ description, lang, meta, title }) {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+            image
+          }
+        }
+      }
+    `,
+  )
+
+  const metaDescription = description || site.siteMetadata.description
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={title}
+      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      meta={[
+        {
+          name: `description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:title`,
+          content: title,
+        },
+        {
+          property: `og:image`,
+          content: site.siteMetadata.image,
+        },
+        {
+          property: `og:title`,
+          content: title,
+        },
+        {
+          property: `og:description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:type`,
+          content: `website`,
+        },
+        {
+          name: `twitter:creator`,
+          content: site.siteMetadata.author,
+        },
+        {
+          name: `twitter:title`,
+          content: title,
+        },
+        {
+          name: `twitter:description`,
+          content: metaDescription,
+        },
+      ].concat(meta)}
+    />
+  )
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+  meta: [],
+  description: ``,
+  title: '',
+}
+
+SEO.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.arrayOf(PropTypes.object),
+  title: PropTypes.string,
+}
+
+export default SEO

apps/storefront/src/gatsby-theme-docz/components/Layout/index.js

@@ -8,7 +8,7 @@ import { Sidebar } from '../Sidebar'
 import { MainContainer } from '../MainContainer'
 import { SkipLink } from '../../../components/SkipLink'
 import { BaseLayout } from '../../../components/BaseLayout'
-import SEO from '../../../components/seo'
+import SEO from '../../base/Seo'
 import styled from 'styled-components'
 import './global.css'
 
@@ -24,6 +24,7 @@ const StyledSidebar = styled(Sidebar)`
 
 export const Layout = ({ doc, children }) => {
   const [open, setOpen] = useState(false)
+
   return (
     <BaseLayout>
       <SEO title={doc.value.metaTitle} />

apps/storefront/src/gatsby-theme-docz/wrapper.js

@@ -9,7 +9,7 @@ import SEO from '../components/seo'
 const Wrapper = ({ children }) => {
   return (
     <>
-      <SEO />
+      {/*   <SEO /> */}
       <Helmet>
         <meta charSet="utf-8" />
         <link