diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-15 19:08:58 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-15 19:08:58 +0200 |
| commit | 056ed0d5f050158cebad689099214b164539899a (patch) | |
| tree | 8e28a82386a785568a7a655bf4d1213096b82589 /src/components/organisms | |
| parent | c95cce04393080a52a54191cff7be8fec68af4b0 (diff) | |
chore: improve accessibility
Diffstat (limited to 'src/components/organisms')
| -rw-r--r-- | src/components/organisms/layout/footer.tsx | 15 | ||||
| -rw-r--r-- | src/components/organisms/layout/summary.module.scss | 5 | ||||
| -rw-r--r-- | src/components/organisms/layout/summary.tsx | 3 |
3 files changed, 21 insertions, 2 deletions
diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx index 15bfa24..1426e96 100644 --- a/src/components/organisms/layout/footer.tsx +++ b/src/components/organisms/layout/footer.tsx @@ -4,6 +4,7 @@ import Copyright, { import BackToTop from '@components/molecules/buttons/back-to-top'; import Nav, { type NavItem } from '@components/molecules/nav/nav'; import { FC } from 'react'; +import { useIntl } from 'react-intl'; import styles from './footer.module.scss'; export type FooterProps = { @@ -31,6 +32,13 @@ export type FooterProps = { * Renders a footer with copyright and nav; */ const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => { + const intl = useIntl(); + const ariaLabel = intl.formatMessage({ + defaultMessage: 'Footer', + description: 'Footer: an accessible name for footer nav', + id: 'd4N8nD', + }); + return ( <footer className={`${styles.wrapper} ${className}`}> <Copyright @@ -39,7 +47,12 @@ const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => { icon={copyright.icon} /> {navItems && ( - <Nav kind="footer" items={navItems} className={styles.nav} /> + <Nav + aria-label={ariaLabel} + kind="footer" + items={navItems} + className={styles.nav} + /> )} <BackToTop target={topId} className={styles['back-to-top']} /> </footer> diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss index 9d28bc6..7e86dd2 100644 --- a/src/components/organisms/layout/summary.module.scss +++ b/src/components/organisms/layout/summary.module.scss @@ -80,6 +80,11 @@ } } +.link { + display: block; + width: fit-content; +} + .title { margin: 0; background: none; diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index 078f9ee..3831c0c 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -116,6 +116,7 @@ const Summary: FC<SummaryProps> = ({ </Link> )), comments: { + about: title, count: commentsCount || 0, target: `${url}#comments`, }, @@ -126,7 +127,7 @@ const Summary: FC<SummaryProps> = ({ <article className={styles.wrapper}> {cover && <ResponsiveImage className={styles.cover} {...cover} />} <header className={styles.header}> - <Link href={url}> + <Link href={url} className={styles.link}> <Heading level={titleLevel} className={styles.title}> {title} </Heading> |
