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
gnosis · Aug 16, 2021 · 7153908 · 7153908
1 parent 4541e37
commit 7153908
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 18 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,27 +2,29 @@
 <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" />
 
     <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>

diff --git 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} />

diff --git 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>

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -1,3 +1,4 @@
+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>
 

diff --git 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>

diff --git 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) => {

diff --git a/src/pages/AppBody.tsx b/src/pages/AppBody.tsx
@@ -1,7 +1,7 @@
 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'};