Skip to content

I
interface
Commit 71539089 authored by Zach Pomerantz's avatar Zach Pomerantz Committed by GitHub
Browse files
Options

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
parent 4541e373
Hide whitespace changes
Inline Side-by-side
Showing with 20 additions and 18 deletions
public/index.html
View file @ 71539089
...@@ -2,6 +2,14 @@ ...@@ -2,6 +2,14 @@
<html translate="no"> <html translate="no">
<head> <head>
<meta charset="utf-8" /> <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="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="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" /> <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
...@@ -9,20 +17,14 @@ ...@@ -9,20 +17,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ff007a" /> <meta name="theme-color" content="#ff007a" />
<meta name="fortmatic-site-verification" content="j93LgcVZk79qcgyo" /> <meta name="fortmatic-site-verification" content="j93LgcVZk79qcgyo" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when the app is installed as a PWA.
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <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 <link rel="preconnect" href="https://www.google-analytics.com/">
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`.
-->
<style> <style>
* { * {
...@@ -83,8 +85,6 @@ ...@@ -83,8 +85,6 @@
} }
} }
</style> </style>
<title>Uniswap Interface</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
src/components/CurrencyLogo/index.tsx
View file @ 71539089
...@@ -50,7 +50,7 @@ export default function CurrencyLogo({ ...@@ -50,7 +50,7 @@ export default function CurrencyLogo({
}, [currency, uriLocations]) }, [currency, uriLocations])
if (currency?.isNative) { 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} /> return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} {...rest} />
......
src/components/Header/index.tsx
View file @ 71539089
...@@ -286,11 +286,11 @@ export default function Header() { ...@@ -286,11 +286,11 @@ export default function Header() {
<Trans>Pool</Trans> <Trans>Pool</Trans>
</StyledNavLink> </StyledNavLink>
{chainId && chainId === SupportedChainId.MAINNET && ( {chainId && chainId === SupportedChainId.MAINNET && (
<StyledNavLink id={`stake-nav-link`} to={'/vote'}> <StyledNavLink id={`vote-nav-link`} to={'/vote'}>
<Trans>Vote</Trans> <Trans>Vote</Trans>
</StyledNavLink> </StyledNavLink>
)} )}
<StyledExternalLink id={`stake-nav-link`} href={infoLink}> <StyledExternalLink id={`charts-nav-link`} href={infoLink}>
<Trans>Charts</Trans> <Trans>Charts</Trans>
<sup>↗</sup> <sup>↗</sup>
</StyledExternalLink> </StyledExternalLink>
......
src/components/Menu/index.tsx
View file @ 71539089
import { t } from '@lingui/macro'
import React, { useEffect, useRef, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import { import {
BookOpen, BookOpen,
...@@ -229,7 +230,7 @@ export default function Menu() { ...@@ -229,7 +230,7 @@ export default function Menu() {
return ( return (
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
<StyledMenu ref={node as any}> <StyledMenu ref={node as any}>
<StyledMenuButton onClick={toggle}> <StyledMenuButton onClick={toggle} aria-label={t`Menu`}>
<StyledMenuIcon /> <StyledMenuIcon />
</StyledMenuButton> </StyledMenuButton>
......
src/components/Settings/index.tsx
View file @ 71539089
...@@ -173,7 +173,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa ...@@ -173,7 +173,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
</AutoColumn> </AutoColumn>
</ModalContentWrapper> </ModalContentWrapper>
</Modal> </Modal>
<StyledMenuButton onClick={toggle} id="open-settings-dialog-button"> <StyledMenuButton onClick={toggle} id="open-settings-dialog-button" aria-label={t`Transaction Settings`}>
<StyledMenuIcon /> <StyledMenuIcon />
{expertMode ? ( {expertMode ? (
<EmojiWrapper> <EmojiWrapper>
......
src/i18n.tsx
View file @ 71539089
...@@ -90,6 +90,7 @@ export function LanguageProvider({ children }: { children: ReactNode }) { ...@@ -90,6 +90,7 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
useEffect(() => { useEffect(() => {
dynamicActivate(locale) dynamicActivate(locale)
.then(() => { .then(() => {
document.documentElement.setAttribute('lang', locale)
setLoaded(true) setLoaded(true)
}) })
.catch((error) => { .catch((error) => {
......
src/pages/AppBody.tsx
View file @ 71539089
import React from 'react' import React from 'react'
import styled from 'styled-components/macro' 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; position: relative;
margin-top: ${({ margin }) => margin ?? '0px'}; margin-top: ${({ margin }) => margin ?? '0px'};
max-width: ${({ maxWidth }) => maxWidth ?? '480px'}; max-width: ${({ maxWidth }) => maxWidth ?? '480px'};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment