From 49237f05a6c8b70f83570c766ff6033374820b47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= Date: Tue, 24 Jan 2023 14:44:47 +0100 Subject: [PATCH] Fix `aria-hidden` element (#12163) * Rename CSS class to make use more clear * Rename component prop to improve code readability * Fix `aria-hidden` directly on a link element This link wouldn't have been clickable by screenreaders * Refactor component This removes a unnessary `div` and a duplicate link Co-authored-by: Ines Montani --- website/src/components/accordion.js | 2 +- website/src/components/card.js | 6 +++--- website/src/components/code.js | 2 +- website/src/components/embed.js | 2 +- website/src/components/footer.js | 8 ++++---- website/src/components/github.js | 2 +- website/src/components/landing.js | 2 +- website/src/components/link.js | 8 ++++---- website/src/components/navigation.js | 4 ++-- website/src/components/readnext.js | 14 +++++++------- website/src/styles/link.module.sass | 2 +- website/src/templates/universe.js | 12 ++++++------ website/src/widgets/styleguide.js | 2 +- 13 files changed, 33 insertions(+), 33 deletions(-) diff --git a/website/src/components/accordion.js b/website/src/components/accordion.js index 504f415a5..9ff145bd2 100644 --- a/website/src/components/accordion.js +++ b/website/src/components/accordion.js @@ -33,7 +33,7 @@ export default function Accordion({ title, id, expanded = false, spaced = false, event.stopPropagation()} > ¶ diff --git a/website/src/components/card.js b/website/src/components/card.js index 3e973daae..ef43eb866 100644 --- a/website/src/components/card.js +++ b/website/src/components/card.js @@ -11,7 +11,7 @@ export default function Card({ title, to, image, header, small, onClick, childre return (
{header && ( - + {header} )} @@ -23,13 +23,13 @@ export default function Card({ title, to, image, header, small, onClick, childre
)} {title && ( - + {title} )} )} - + {children} diff --git a/website/src/components/code.js b/website/src/components/code.js index 51067115b..5c9afd978 100644 --- a/website/src/components/code.js +++ b/website/src/components/code.js @@ -363,7 +363,7 @@ const JuniperWrapper = ({ title, lang, children }) => { {juniperTitle} spaCy v{binderVersion} · Python 3 · via{' '} - + Binder diff --git a/website/src/components/embed.js b/website/src/components/embed.js index 2b210b5d6..cc94c9738 100644 --- a/website/src/components/embed.js +++ b/website/src/components/embed.js @@ -89,7 +89,7 @@ const Image = ({ src, alt, title, href, ...props }) => { return (
{href ? ( - + {/* eslint-disable-next-line @next/next/no-img-element */} {alt} diff --git a/website/src/components/footer.js b/website/src/components/footer.js index 3873d8c29..da2b5eaaa 100644 --- a/website/src/components/footer.js +++ b/website/src/components/footer.js @@ -21,7 +21,7 @@ export default function Footer({ wide = false }) {
  • {label}
    • {items.map(({ text, url }, j) => (
  • - + {text}
    • @@ -42,14 +42,14 @@ export default function Footer({ wide = false }) {
    © 2016-{new Date().getFullYear()}{' '} - + {company} - + - + Legal / Imprint
    diff --git a/website/src/components/github.js b/website/src/components/github.js index f39942673..d967011ed 100644 --- a/website/src/components/github.js +++ b/website/src/components/github.js @@ -42,7 +42,7 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => { return ( <>
    - + {label} )} - + {title} diff --git a/website/src/components/link.js b/website/src/components/link.js index 1562a82c8..c8de617fe 100644 --- a/website/src/components/link.js +++ b/website/src/components/link.js @@ -26,7 +26,7 @@ export default function Link({ to, href, onClick, - hidden = false, + noLinkLayout = false, hideIcon = false, ws = false, forceExternal = false, @@ -36,10 +36,10 @@ export default function Link({ const dest = to || href const external = forceExternal || /(http(s?)):\/\//gi.test(dest) const icon = getIcon(dest) - const withIcon = !hidden && !hideIcon && !!icon && !isImage(children) + const withIcon = !noLinkLayout && !hideIcon && !!icon && !isImage(children) const sourceWithText = withIcon && isString(children) const linkClassNames = classNames(classes.root, className, { - [classes.hidden]: hidden, + [classes['no-link-layout']]: noLinkLayout, [classes.nowrap]: (withIcon && !sourceWithText) || icon === 'network', [classes['with-icon']]: withIcon, }) @@ -97,7 +97,7 @@ Link.propTypes = { to: PropTypes.string, href: PropTypes.string, onClick: PropTypes.func, - hidden: PropTypes.bool, + noLinkLayout: PropTypes.bool, hideIcon: PropTypes.bool, ws: PropTypes.bool, className: PropTypes.string, diff --git a/website/src/components/navigation.js b/website/src/components/navigation.js index 4d8f0d091..b267252ac 100644 --- a/website/src/components/navigation.js +++ b/website/src/components/navigation.js @@ -30,7 +30,7 @@ const NavigationDropdown = ({ items = [], section }) => { export default function Navigation({ title, items = [], section, search, alert, children }) { const logo = ( - +

    {title}

    @@ -57,7 +57,7 @@ export default function Navigation({ title, items = [], section, search, alert, }) return (
  • - + {text}
    • diff --git a/website/src/components/readnext.js b/website/src/components/readnext.js index 09c0e4655..159a4d370 100644 --- a/website/src/components/readnext.js +++ b/website/src/components/readnext.js @@ -9,15 +9,15 @@ import classes from '../styles/readnext.module.sass' export default function ReadNext({ title, to }) { return ( -
    - + + {title} - - - - -
    + + + + ) } diff --git a/website/src/styles/link.module.sass b/website/src/styles/link.module.sass index 41781538b..cb7dc7910 100644 --- a/website/src/styles/link.module.sass +++ b/website/src/styles/link.module.sass @@ -7,7 +7,7 @@ &:hover color: var(--color-front) -.hidden +.no-link-layout border: none color: inherit diff --git a/website/src/templates/universe.js b/website/src/templates/universe.js index 73dde219c..e72356924 100644 --- a/website/src/templates/universe.js +++ b/website/src/templates/universe.js @@ -94,14 +94,14 @@ const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComp ) return cover ? (

    - + {/* eslint-disable-next-line @next/next/no-img-element */} {title

    ) : data.id === 'videos' ? (
    - + {header}
    {title}
    @@ -216,7 +216,7 @@ const Project = ({ data, components }) => (

    {data.spacy_version && } {data.github && ( - + ( {data.author_links && data.author_links.twitter && ( @@ -313,14 +313,14 @@ const Project = ({ data, components }) => ( {data.author_links && data.author_links.github && ( )} {data.author_links && data.author_links.website && ( - + )} diff --git a/website/src/widgets/styleguide.js b/website/src/widgets/styleguide.js index 8b3d3eeec..82edf7d61 100644 --- a/website/src/widgets/styleguide.js +++ b/website/src/widgets/styleguide.js @@ -76,7 +76,7 @@ export const Patterns = () => { by - + Kemal Şanlı