Unverified Commit c4c00ce2 authored by Benjamin Morali's avatar Benjamin Morali Committed by GitHub
Browse files

feat(a11y): improve a11y and best practices with Lighthouse (#52)

parent 9ebf5dd0
......@@ -8,7 +8,7 @@ type DownloadLinkProps = {
};
const DownloadLink: FC<DownloadLinkProps> = ({ url, label }) => (
<Button target="_blank" href={url} color="inherit">
<Button target="_blank" href={url} color="inherit" rel="noopener">
<GetAppIcon />
{label}
</Button>
......
......@@ -54,6 +54,7 @@ const HomepageTweets: FC = () => {
size="small"
startIcon={<TwitterIcon />}
target="_blank"
rel="noopener"
href={tweet.url}
>
Voir le tweet
......
......@@ -19,7 +19,7 @@ const ProductFeatures: FC = () => {
return (
<Box className={classes.content}>
<Box pb={6} display="flex" justifyContent="center">
<Typography variant="h5" color="textPrimary">
<Typography variant="h5" component="h2" color="textPrimary">
Pourquoi c&rsquo;est si simple ?
</Typography>
</Box>
......
......@@ -41,6 +41,7 @@ const TeamMember: FC<TeamMemberProps> = ({ job, name, photo, url }) => {
size="small"
startIcon={<LinkedInIcon />}
target="_blank"
rel="noopener"
href={url}
>
Voir le profil
......
......@@ -42,7 +42,7 @@ const TimelineElement: FC<TimelineElementProps> = ({
<Typography color={isMajor ? "primary" : "inherit"}>{title}</Typography>
{link && (
<div>
<Link href={link} target="_blank">
<Link href={link} target="_blank" rel="noopener">
En savoir plus
</Link>
</div>
......
import { Container, Grid, Link, Theme } from "@material-ui/core";
import { Button, Container, Grid, Link, Theme } from "@material-ui/core";
import BookIcon from "@material-ui/icons/Book";
import GitHubIcon from "@material-ui/icons/GitHub";
import MailIcon from "@material-ui/icons/Mail";
......@@ -26,18 +26,14 @@ const Footer: FC = () => {
<Link
href="https://www.fabrique.social.gouv.fr/"
target="_blank"
rel="noopener"
color="inherit"
>
Fabrique des ministères sociaux
</Link>
</Grid>
<Grid item>
<Link
component={GatsbyLink}
to="/mentions-legales"
target="_blank"
color="inherit"
>
<Link component={GatsbyLink} to="/mentions-legales" color="inherit">
Mentions légales
</Link>
</Grid>
......@@ -45,6 +41,7 @@ const Footer: FC = () => {
<Link
href="mailto:archifiltre@sg.social.gouv.fr"
target="_blank"
rel="noopener"
color="inherit"
>
Nous contacter
......@@ -56,7 +53,9 @@ const Footer: FC = () => {
<Link
href="https://twitter.com/archifiltre"
target="_blank"
rel="noopener"
color="inherit"
aria-label="Twitter"
>
<TwitterIcon />
</Link>
......@@ -65,7 +64,9 @@ const Footer: FC = () => {
<Link
href="https://github.com/SocialGouv/archifiltre/wiki/Wiki-Archifiltre"
target="_blank"
rel="noopener"
color="inherit"
aria-label="Wiki archifiltre"
>
<BookIcon />
</Link>
......@@ -74,7 +75,9 @@ const Footer: FC = () => {
<Link
href="https://www.youtube.com/channel/UClDwrT-Y1NY9WnEiXLMHp6w"
target="_blank"
rel="noopener"
color="inherit"
aria-label="Youtube"
>
<YouTubeIcon />
</Link>
......@@ -83,7 +86,9 @@ const Footer: FC = () => {
<Link
href="https://github.com/SocialGouv/archifiltre"
target="_blank"
rel="noopener"
color="inherit"
aria-label="GitHub"
>
<GitHubIcon />
</Link>
......@@ -91,8 +96,10 @@ const Footer: FC = () => {
<Grid item>
<Link
href="mailto:archifiltre@sg.social.gouv.fr"
rel="noopener"
target="_blank"
color="inherit"
aria-label="Nous contacter"
>
<MailIcon />
</Link>
......
......@@ -56,7 +56,10 @@ const Header: FC<HeaderProps> = ({ onToggleTheme, theme }) => {
color="inherit"
className={classes.link}
>
<Img fixed={data.file.childImageSharp.fixed} />
<Img
fixed={data.file.childImageSharp.fixed}
alt="Logo Archifiltre"
/>
</Link>
<Box flex={1} />
{!isMobile &&
......@@ -89,7 +92,11 @@ const Header: FC<HeaderProps> = ({ onToggleTheme, theme }) => {
>
Co-créez Archifiltre
</Button>
<Button color="inherit" onClick={onToggleTheme}>
<Button
color="inherit"
onClick={onToggleTheme}
aria-label="Thème clair/sombre"
>
{theme === "light" ? (
<Brightness4Icon />
) : (
......
......@@ -38,7 +38,7 @@ limité.
### Photos des openlabs précédents
<div align="center">
<img src="images/openlab/openlab1.jpg" width="800px"/>
<img src="images/openlab/openlab1.jpg" width="800px" alt="openlab Archifiltre"/>
</div>
## Devenez ambassadeur·drice·s Archifiltre !
......
......@@ -49,6 +49,7 @@ const IndexPage: FC = () => {
<Grid item>
<Button
target="_blank"
rel="noopener"
href={getDownloadLink()}
variant="contained"
size="large"
......@@ -75,7 +76,7 @@ const IndexPage: FC = () => {
</HomepageHeader>
<Box p={3} pb={6} textAlign="center">
<Box p={3} pb={6}>
<Typography variant="h5" color="textPrimary">
<Typography variant="h5" component="h2" color="textPrimary">
Ce qu&rsquo;Archifiltre permet
</Typography>
</Box>
......@@ -85,6 +86,7 @@ const IndexPage: FC = () => {
<Button
color="inherit"
target="_blank"
rel="noopener"
href="https://github.com/SocialGouv/archifiltre/wiki/Wiki-Archifiltre"
endIcon={<ArrowForwardIcon />}
>
......@@ -98,7 +100,7 @@ const IndexPage: FC = () => {
</Box>
<Box p={3} textAlign="center">
<Box p={3}>
<Typography variant="h5" color="textPrimary">
<Typography variant="h5" component="h2" color="textPrimary">
Ils parlent de nous
</Typography>
</Box>
......
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