chore: fix SEO and accessibility nits for Lighthouse (#2212)

* refactor: index.html * chore: preconnect to GA * chore(SEO): add meta content * chore(SEO): add alt to ethereum logo * chore(accessibility): add aria-labels to menus * chore(accessibility): mark AppBody as main * chore(accessibility): update nav link ids * chore(accessibility): set html.lang to match i18n locale * chore(refactor): mv html.lang to useEffect

chore: fix SEO and accessibility nits for Lighthouse (#2212)
* refactor: index.html * chore: preconnect to GA * chore(SEO): add meta content * chore(SEO): add alt to ethereum logo * chore(accessibility): add aria-labels to menus * chore(accessibility): mark AppBody as main * chore(accessibility): update nav link ids * chore(accessibility): set html.lang to match i18n locale * chore(refactor): mv html.lang to useEffect
71539089 · Zach Pomerantz · GitHub · 4541e373 · 71539089 · 71539089
Commit 71539089 authored Aug 16, 2021 by Zach Pomerantz Committed by GitHub Aug 16, 2021
7 changed files
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,14 @@
 <html translate="no">
  <head>
    <meta charset="utf-8" />
+
+    <title>Uniswap Interface</title>
+    <meta name="description" content="Uniswap Interface" />
+
+    <!--
+      %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
+      Only files inside the `public` folder can be referenced from the HTML.
+    -->
    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
@@ -9,20 +17,14 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#ff007a" />
    <meta name="fortmatic-site-verification" content="j93LgcVZk79qcgyo" />
+
    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+      manifest.json provides metadata used when the app is installed as a PWA.
+      See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.

-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="preconnect" href="https://www.google-analytics.com/">

    <style>
        * {
@@ -83,8 +85,6 @@
            }
        }
    </style>
-
-    <title>Uniswap Interface</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

--- a/src/components/CurrencyLogo/index.tsx
+++ b/src/components/CurrencyLogo/index.tsx
@@ -50,7 +50,7 @@ export default function CurrencyLogo({
  }, [currency, uriLocations])

  if (currency?.isNative) {
-    return <StyledEthereumLogo src={EthereumLogo} size={size} style={style} {...rest} />
+    return <StyledEthereumLogo src={EthereumLogo} alt="ethereum logo" size={size} style={style} {...rest} />
  }

  return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} {...rest} />

--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -286,11 +286,11 @@ export default function Header() {
          <Trans>Pool</Trans>
        </StyledNavLink>
        {chainId && chainId === SupportedChainId.MAINNET && (
-          <StyledNavLink id={`stake-nav-link`} to={'/vote'}>
+          <StyledNavLink id={`vote-nav-link`} to={'/vote'}>
            <Trans>Vote</Trans>
          </StyledNavLink>
        )}
-        <StyledExternalLink id={`stake-nav-link`} href={infoLink}>
+        <StyledExternalLink id={`charts-nav-link`} href={infoLink}>
          <Trans>Charts</Trans>
          <sup>↗</sup>
        </StyledExternalLink>

--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
+import { t } from '@lingui/macro'
 import React, { useEffect, useRef, useState } from 'react'
 import {
  BookOpen,
@@ -229,7 +230,7 @@ export default function Menu() {
  return (
    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
    <StyledMenu ref={node as any}>
-      <StyledMenuButton onClick={toggle}>
+      <StyledMenuButton onClick={toggle} aria-label={t`Menu`}>
        <StyledMenuIcon />
      </StyledMenuButton>


--- a/src/components/Settings/index.tsx
+++ b/src/components/Settings/index.tsx
@@ -173,7 +173,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
          </AutoColumn>
        </ModalContentWrapper>
      </Modal>
-      <StyledMenuButton onClick={toggle} id="open-settings-dialog-button">
+      <StyledMenuButton onClick={toggle} id="open-settings-dialog-button" aria-label={t`Transaction Settings`}>
        <StyledMenuIcon />
        {expertMode ? (
          <EmojiWrapper>

--- a/src/i18n.tsx
+++ b/src/i18n.tsx
@@ -90,6 +90,7 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
  useEffect(() => {
    dynamicActivate(locale)
      .then(() => {
+        document.documentElement.setAttribute('lang', locale)
        setLoaded(true)
      })
      .catch((error) => {

--- a/src/pages/AppBody.tsx
+++ b/src/pages/AppBody.tsx
 import React from 'react'
 import styled from 'styled-components/macro'

-export const BodyWrapper = styled.div<{ margin?: string; maxWidth?: string }>`
+export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
  position: relative;
  margin-top: ${({ margin }) => margin ?? '0px'};
  max-width: ${({ maxWidth }) => maxWidth ?? '480px'};