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