From 7153908935bc04aa258782e3bb1fc9c3b703351c Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Mon, 16 Aug 2021 18:30:52 -0400 Subject: [PATCH] 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 --- public/index.html | 24 ++++++++++++------------ src/components/CurrencyLogo/index.tsx | 2 +- src/components/Header/index.tsx | 4 ++-- src/components/Menu/index.tsx | 3 ++- src/components/Settings/index.tsx | 2 +- src/i18n.tsx | 1 + src/pages/AppBody.tsx | 2 +- 7 files changed, 20 insertions(+), 18 deletions(-) diff --git a/public/index.html b/public/index.html index 568a06d685..c8f6755719 100644 --- a/public/index.html +++ b/public/index.html @@ -2,6 +2,14 @@ + + Uniswap Interface + + + @@ -9,20 +17,14 @@ + - + - - Uniswap Interface diff --git a/src/components/CurrencyLogo/index.tsx b/src/components/CurrencyLogo/index.tsx index e3e2f14d86..52b39fae0d 100644 --- 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 + return } return diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 502fc28a4f..997d394768 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -286,11 +286,11 @@ export default function Header() { Pool {chainId && chainId === SupportedChainId.MAINNET && ( - + Vote )} - + Charts ↗ diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 2c7eaa849e..2655c54989 100644 --- 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 - + diff --git a/src/components/Settings/index.tsx b/src/components/Settings/index.tsx index 5e375de07e..0e037b1655 100644 --- a/src/components/Settings/index.tsx +++ b/src/components/Settings/index.tsx @@ -173,7 +173,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa - + {expertMode ? ( diff --git a/src/i18n.tsx b/src/i18n.tsx index 73890bdb7e..bb27c99048 100644 --- 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 index 3ce133e62b..68aa3a7ec2 100644 --- 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'};