Skip to content

Commit

Permalink
Merge pull request #174 from ChtiJS/Accessibility-
Browse files Browse the repository at this point in the history
feat(accessibility): added accessibility attributes
  • Loading branch information
nfroidure authored Dec 22, 2023
2 parents c767aa9 + 57c123b commit 7c7ae54
Show file tree
Hide file tree
Showing 15 changed files with 217 additions and 165 deletions.
4 changes: 3 additions & 1 deletion src/app/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ export default async function Page({ params }: { params: Params }) {
{renderMarkdown({ index: 0 }, entry.content)}
<div className="clear"></div>
<Paragraph>
<Anchor href="/">Retour</Anchor>
<Anchor href="/" title="Revenir à la page précédente">
Retour
</Anchor>
</Paragraph>
</ContentBlock>
);
Expand Down
4 changes: 3 additions & 1 deletion src/app/conferences/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ export default async function BlogPost({ params }: { params: Params }) {
</Paragraph>
<div className={styles.clear}></div>
<Paragraph>
<Anchor href="/conferences">Retour</Anchor>
<Anchor href="/conferences" title="Retourner à la page précédente">
Retour
</Anchor>
</Paragraph>
</ContentBlock>
);
Expand Down
15 changes: 12 additions & 3 deletions src/app/conferences/entries.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,10 @@ export const Entries = ({ entries, page, pagesCount }: EntriesProps) => {
<div className={styles.entry_item} key={entry.id}>
{entry.illustration ? (
<Paragraph className={styles.entry_illustration}>
<Anchor href={`/conferences/${entry.id}`}>
<Anchor
href={`/conferences/${entry.id}`}
title="Voir le résumé"
>
<img
src={entry.illustration.url}
alt={entry.illustration.alt}
Expand All @@ -128,12 +131,16 @@ export const Entries = ({ entries, page, pagesCount }: EntriesProps) => {
</Paragraph>
) : null}
<Heading2 className={styles.entry_title}>
<Anchor href={`/conferences/${entry.id}`}>{entry.title}</Anchor>
<Anchor href={`/conferences/${entry.id}`} title="Voir le résumé">
{entry.title}
</Anchor>
</Heading2>
<Paragraph className={styles.entry_title}>
{entry.description}
</Paragraph>
<Anchor href={`/conferences/${entry.id}`}>Lire la suite</Anchor>
<Anchor href={`/conferences/${entry.id}`} title="Voir le résumé">
Lire la suite
</Anchor>
<div className={styles.clear}></div>
</div>
))}
Expand All @@ -147,6 +154,7 @@ export const Entries = ({ entries, page, pagesCount }: EntriesProps) => {
page > 2 ? `/conferences/pages/${page - 1}` : '/conferences'
}
rel="previous"
title="Voir la page précédente"
>
Précédent
</Anchor>
Expand All @@ -157,6 +165,7 @@ export const Entries = ({ entries, page, pagesCount }: EntriesProps) => {
iconPosition="last"
href={`/conferences/pages/${page + 1}`}
rel="next"
title="Voir la page suivante"
>
Suivant
</Anchor>
Expand Down
16 changes: 14 additions & 2 deletions src/app/credits/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,10 @@ export default async function Page() {
<Article key={entry.id}>
<img src={entry.avatar_url} alt={`Avatar de ${entry.name}`} />
<Heading2>
<Anchor href={entry.html_url as string}>
<Anchor
href={entry.html_url as string}
title={`Se rendre sur le profil GitHub de ${entry.name}`}
>
{entry.name} alias {entry.login}
</Anchor>
</Heading2>
Expand All @@ -95,6 +98,7 @@ export default async function Page() {
(entry.blog.startsWith('http') ? '' : 'https://') +
entry.blog
}
title={`Se rendre sur le blog de ${entry.name}`}
>
📰Blog
</Anchor>{' '}
Expand All @@ -104,12 +108,20 @@ export default async function Page() {
<>
<Anchor
href={'https://twitter.com/' + entry.twitter_username}
title={`Se rendre sur le profil Twitter de ${entry.name}`}
>
📲Twitter
</Anchor>{' '}
</>
) : null}
{<Anchor href={entry.html_url as string}>💻GitHub</Anchor>}
{
<Anchor
href={entry.html_url as string}
title={`Se rendre sur le profil GitHub de ${entry.name}`}
>
💻GitHub
</Anchor>
}
</Paragraph>
</Article>
))}
Expand Down
16 changes: 14 additions & 2 deletions src/app/membres/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,10 @@ export default async function Page() {
<Article key={entry.id}>
<img src={entry.avatar_url} alt={`Avatar de ${entry.name}`} />
<Heading2>
<Anchor href={entry.html_url as string}>
<Anchor
href={entry.html_url as string}
title={`Se rendre sur le profil GitHub de ${entry.name}`}
>
{entry.name} alias {entry.login}
</Anchor>
</Heading2>
Expand All @@ -76,6 +79,7 @@ export default async function Page() {
(entry.blog.startsWith('http') ? '' : 'https://') +
entry.blog
}
title={`Se rendre sur le blog de ${entry.name}`}
>
📰Blog
</Anchor>{' '}
Expand All @@ -85,12 +89,20 @@ export default async function Page() {
<>
<Anchor
href={'https://twitter.com/' + entry.twitter_username}
title={`Se rendre sur le profil Twitter de ${entry.name}`}
>
📲Twitter
</Anchor>{' '}
</>
) : null}
{<Anchor href={entry.html_url as string}>💻GitHub</Anchor>}
{
<Anchor
href={entry.html_url as string}
title={`Se rendre sur le profil GitHub de ${entry.name}`}
>
💻GitHub
</Anchor>
}
</Paragraph>
</Article>
))}
Expand Down
51 changes: 41 additions & 10 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,21 +77,33 @@ export default async function Page() {
<UnorderedList>
<ListItem>
Le{' '}
<Anchor href="http://www.meetup.com/FranceJS/">
<Anchor
href="http://www.meetup.com/FranceJS/"
title="Rejoindre notre groupe Meetup"
>
groupe Meetup de FranceJS
</Anchor>{' '}
;
</ListItem>
<ListItem>
Le{' '}
<Anchor href="https://groups.google.com/g/chtijs">
<Anchor
href="https://groups.google.com/g/chtijs"
title="Visiter notre groupe Google"
>
groupe Google
</Anchor>{' '}
de ChtiJS (plus axé proposition de conférences et préparatifs) ;
</ListItem>
<ListItem>
Le compte{' '}
<Anchor href="https://twitter.com/chtijs">Twitter de ChtiJS</Anchor> ;
<Anchor
href="https://twitter.com/chtijs"
title="Voir notre ocmpte Twitter"
>
Twitter de ChtiJS
</Anchor>{' '}
;
</ListItem>
</UnorderedList>
<Heading2>Concept</Heading2>
Expand All @@ -116,28 +128,47 @@ export default async function Page() {
</Paragraph>
<Paragraph>
Signalez vous sur Twitter auprès de{' '}
<Anchor href="https://twitter.com/chtijs">@chtijs</Anchor>, ou inscrivez
vous sur la{' '}
<Anchor href="https://groups.google.com/g/chtijs">
<Anchor
href="https://twitter.com/chtijs"
title="Nous suivre sur Twitter"
>
@chtijs
</Anchor>
, ou inscrivez vous sur la{' '}
<Anchor
href="https://groups.google.com/g/chtijs"
title="S'abonner à notre liste de diffusion"
>
liste de diffusion
</Anchor>{' '}
et rejoignez nous sur{' '}
<Anchor href="https://weblille.rocks/">slack</Anchor>.
<Anchor href="https://weblille.rocks/" title="Rejoindre notre Slack">
slack
</Anchor>
.
</Paragraph>
<Heading2>Site web</Heading2>
<Paragraph>
Notre site web est aussi ouvert aux contributions, contenus comme code.
Il vous suffit de faire un pull request sur{' '}
<Anchor href="https://github.com/ChtiJS/chtijs.francejs.org">
<Anchor
href="https://github.com/ChtiJS/chtijs.francejs.org"
title="Voir notre depôt Git"
>
le dépôt GitHub
</Anchor>
. Vous pouvez retrouver les contributeurs du site{' '}
<Anchor href="/credits/index.html">sur cette page</Anchor>.
<Anchor href="/credits/index.html" title="Voir nos contributeur/rices">
sur cette page
</Anchor>
.
</Paragraph>
<Heading2>FranceJS</Heading2>
<Paragraph>
ChtiJS fait partie de{' '}
<Anchor href="http://francejs.org">l&apos;initiative FranceJS</Anchor>{' '}
<Anchor href="http://francejs.org" title="Visite le site de FranceJS">
l&apos;initiative FranceJS
</Anchor>{' '}
qui fédère les acteurs de JavaScript afin de promouvoir ce langage et de
faciliter son développement en France.
</Paragraph>
Expand Down
17 changes: 14 additions & 3 deletions src/app/planete/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,10 @@ export default async function Page() {
{entries.map((entry) => (
<Article key={entry.entry.link}>
<Heading2>
<Anchor href={entry.entry.link as string}>
<Anchor
href={entry.entry.link as string}
title="Voir l'article original"
>
{entry.entry.title}
</Anchor>
</Heading2>
Expand All @@ -104,14 +107,22 @@ export default async function Page() {
)}{' '}
par{' '}
<Cite>
<Anchor href={entry.blog.url as string}>
<Anchor
href={entry.blog.url as string}
title="Voir le blog de l'auteur"
>
{entry.blog.author}
</Anchor>
</Cite>
</>
</Paragraph>
<Paragraph>
<Anchor href={entry.entry.link as string}>Lire ➤</Anchor>
<Anchor
href={entry.entry.link as string}
title="Voir l'article original"
>
Lire ➤
</Anchor>
</Paragraph>
</Article>
))}
Expand Down
72 changes: 27 additions & 45 deletions src/components/a.tsx
Original file line number Diff line number Diff line change
@@ -1,69 +1,51 @@
import Link from 'next/link';
import styles from './a.module.scss';
import type { LinkProps } from 'next/link';
import { type ComponentProps } from 'react';

const Anchor = ({
export default function Anchor({
children,
href,
as,
replace,
scroll,
shallow,
passHref,
prefetch,
locale,
className,
icon,
iconPosition = 'first',
...props
}: {
children: React.ReactNode;
} & LinkProps & {
icon?: string;
iconPosition?: 'first' | 'last';
} & Exclude<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>) => {
title: string;
icon?: string;
iconPosition?: 'first' | 'last';
} & Omit<ComponentProps<typeof Link>, 'target'>) {
const isURLLink =
href.length > 30 &&
href.toString().length > 30 &&
children instanceof Array &&
typeof children[0] === 'string' &&
href === children[0];

return (
<Link
legacyBehavior
{...{
href,
as,
replace,
scroll,
shallow,
passHref,
prefetch,
locale,
}}
>
<a
className={`${styles.root}${className ? ' ' + className : ''}${
icon
? ` ${styles.withIcon} ${
iconPosition === 'first' ? styles.first : styles.last
}`
: ''
}`}
{...props}
target={href.startsWith('http') ? '_blank' : '_self'}
>
{icon ? <span className={styles.icon} /> : null}
{isURLLink
className={[
styles.root,
...(className ? [className] : []),
...(icon
? [
href.replace(/(http|ftp)s?:\/\//, '').slice(0, 15) +
'…' +
href.slice(-5),
styles.withIcon,
iconPosition === 'first' ? styles.first : styles.last,
]
: children}
</a>
: []),
].join(' ')}
{...props}
target={href.toString().startsWith('http') ? '_blank' : '_self'}
>
{icon ? <span className={styles.icon} aria-hidden="true" /> : null}
{isURLLink
? [
href.replace(/(http|ftp)s?:\/\//, '').slice(0, 15) +
'…' +
href.slice(-5),
]
: children}
</Link>
);
};

export default Anchor;
}
Loading

0 comments on commit 7c7ae54

Please sign in to comment.