ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Zach Pomerantz 2021-08-16 18:30:52 -04:00 committed by GitHub
parent 4541e37388
commit 7153908935
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/index.html
View File

@ -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>

2
src/components/CurrencyLogo/index.tsx
View File

@ -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} />

4
src/components/Header/index.tsx
View File

@ -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>

3
src/components/Menu/index.tsx
View File

@ -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>

2
src/components/Settings/index.tsx
View File

@ -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>

1
src/i18n.tsx
View File

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

2
src/pages/AppBody.tsx
View File

@ -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'};