explosion/spaCy
1
1
Fork 0
mirror of https://github.com/explosion/spaCy.git synced 2024-11-10 19:57:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix aria-hidden element (#12163)

Browse Source 
* 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 <ines@ines.io>
This commit is contained in:
Marcus Blättermann 2023-01-24 14:44:47 +01:00 committed by GitHub
parent 0a70696923
commit 49237f05a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/components/accordion.js
View File

@ -33,7 +33,7 @@ export default function Accordion({ title, id, expanded = false, spaced = false,
<Link <Link
to={`#${id}`} to={`#${id}`}
className={classes.anchor} className={classes.anchor}
hidden noLinkLayout
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
> >
&para; &para;

6
website/src/components/card.js
View File

@ -11,7 +11,7 @@ export default function Card({ title, to, image, header, small, onClick, childre
return ( return (
<div className={classNames(classes.root, { [classes.small]: !!small })}> <div className={classNames(classes.root, { [classes.small]: !!small })}>
{header && ( {header && (
<Link to={to} onClick={onClick} hidden> <Link to={to} onClick={onClick} noLinkLayout>
{header} {header}
</Link> </Link>
)} )}
@ -23,13 +23,13 @@ export default function Card({ title, to, image, header, small, onClick, childre
</div> </div>
)} )}
{title && ( {title && (
<Link to={to} onClick={onClick} hidden> <Link to={to} onClick={onClick} noLinkLayout>
{title} {title}
</Link> </Link>
)} )}
</H5> </H5>
)} )}
<Link to={to} onClick={onClick} hidden> <Link to={to} onClick={onClick} noLinkLayout>
{children} {children}
</Link> </Link>
</div> </div>

2
website/src/components/code.js
View File

@ -363,7 +363,7 @@ const JuniperWrapper = ({ title, lang, children }) => {
{juniperTitle} {juniperTitle}
<span className={classes['juniper-meta']}> <span className={classes['juniper-meta']}>
spaCy v{binderVersion} &middot; Python 3 &middot; via{' '} spaCy v{binderVersion} &middot; Python 3 &middot; via{' '}
<Link to="https://mybinder.org/" hidden> <Link to="https://mybinder.org/" noLinkLayout>
Binder Binder
</Link> </Link>
</span> </span>

2
website/src/components/embed.js
View File

@ -89,7 +89,7 @@ const Image = ({ src, alt, title, href, ...props }) => {
return ( return (
<figure className="gatsby-resp-image-figure"> <figure className="gatsby-resp-image-figure">
{href ? ( {href ? (
<Link className={linkClassNames} href={href} hidden forceExternal> <Link className={linkClassNames} href={href} noLinkLayout forceExternal>
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img className={classes.image} src={src} alt={alt} width={650} height="auto" /> <img className={classes.image} src={src} alt={alt} width={650} height="auto" />
</Link> </Link>

8
website/src/components/footer.js
View File

@ -21,7 +21,7 @@ export default function Footer({ wide = false }) {
<li className={classes.label}>{label}</li> <li className={classes.label}>{label}</li>
{items.map(({ text, url }, j) => ( {items.map(({ text, url }, j) => (
<li key={j}> <li key={j}>
<Link to={url} hidden> <Link to={url} noLinkLayout>
{text} {text}
</Link> </Link>
</li> </li>
@ -42,14 +42,14 @@ export default function Footer({ wide = false }) {
<div className={classNames(classes.content, classes.copy)}> <div className={classNames(classes.content, classes.copy)}>
<span> <span>
&copy; 2016-{new Date().getFullYear()}{' '} &copy; 2016-{new Date().getFullYear()}{' '}
<Link to={companyUrl} hidden> <Link to={companyUrl} noLinkLayout>
{company} {company}
</Link> </Link>
</span> </span>
<Link to={companyUrl} aria-label={company} hidden className={classes.logo}> <Link to={companyUrl} aria-label={company} noLinkLayout className={classes.logo}>
<SVG src={explosionLogo.src} width={45} height={45} /> <SVG src={explosionLogo.src} width={45} height={45} />
</Link> </Link>
<Link to={`${companyUrl}/legal`} hidden> <Link to={`${companyUrl}/legal`} noLinkLayout>
Legal / Imprint Legal / Imprint
</Link> </Link>
</div> </div>

2
website/src/components/github.js
View File

@ -42,7 +42,7 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
return ( return (
<> <>
<header className={classes.header}> <header className={classes.header}>
<Link to={url} hidden> <Link to={url} noLinkLayout>
<Icon name="github" width={16} inline /> <Icon name="github" width={16} inline />
<code <code
className={classNames(classes['inline-code'], classes['inline-code-dark'])} className={classNames(classes['inline-code'], classes['inline-code-dark'])}

2
website/src/components/landing.js
View File

@ -124,7 +124,7 @@ export const LandingBanner = ({
<span className={classes['label']}>{label}</span> <span className={classes['label']}>{label}</span>
</div> </div>
)} )}
<Link to={to} hidden> <Link to={to} noLinkLayout>
{title} {title}
</Link> </Link>
</Heading> </Heading>

8
website/src/components/link.js
View File

@ -26,7 +26,7 @@ export default function Link({
to, to,
href, href,
onClick, onClick,
hidden = false, noLinkLayout = false,
hideIcon = false, hideIcon = false,
ws = false, ws = false,
forceExternal = false, forceExternal = false,
@ -36,10 +36,10 @@ export default function Link({
const dest = to || href const dest = to || href
const external = forceExternal || /(http(s?)):\/\//gi.test(dest) const external = forceExternal || /(http(s?)):\/\//gi.test(dest)
const icon = getIcon(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 sourceWithText = withIcon && isString(children)
const linkClassNames = classNames(classes.root, className, { const linkClassNames = classNames(classes.root, className, {
[classes.hidden]: hidden, [classes['no-link-layout']]: noLinkLayout,
[classes.nowrap]: (withIcon && !sourceWithText) || icon === 'network', [classes.nowrap]: (withIcon && !sourceWithText) || icon === 'network',
[classes['with-icon']]: withIcon, [classes['with-icon']]: withIcon,
}) })
@ -97,7 +97,7 @@ Link.propTypes = {
to: PropTypes.string, to: PropTypes.string,
href: PropTypes.string, href: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func,
hidden: PropTypes.bool, noLinkLayout: PropTypes.bool,
hideIcon: PropTypes.bool, hideIcon: PropTypes.bool,
ws: PropTypes.bool, ws: PropTypes.bool,
className: PropTypes.string, className: PropTypes.string,

4
website/src/components/navigation.js
View File

@ -30,7 +30,7 @@ const NavigationDropdown = ({ items = [], section }) => {
export default function Navigation({ title, items = [], section, search, alert, children }) { export default function Navigation({ title, items = [], section, search, alert, children }) {
const logo = ( const logo = (
<Link to="/" aria-label={title} hidden> <Link to="/" aria-label={title} noLinkLayout>
<h1 className={classes.title}>{title}</h1> <h1 className={classes.title}>{title}</h1>
<SVG src={logoSpacy.src} className={classes.logo} width={300} height={96} /> <SVG src={logoSpacy.src} className={classes.logo} width={300} height={96} />
</Link> </Link>
@ -57,7 +57,7 @@ export default function Navigation({ title, items = [], section, search, alert,
}) })
return ( return (
<li key={i} className={itemClassNames}> <li key={i} className={itemClassNames}>
<Link to={url} tabIndex={isActive ? '-1' : null} hidden> <Link to={url} tabIndex={isActive ? '-1' : null} noLinkLayout>
{text} {text}
</Link> </Link>
</li> </li>

14
website/src/components/readnext.js
View File

@ -9,15 +9,15 @@ import classes from '../styles/readnext.module.sass'
export default function ReadNext({ title, to }) { export default function ReadNext({ title, to }) {
return ( return (
<div className={classes.root}> <Link to={to} noLinkLayout className={classes.root}>
<Link to={to} hidden> <span>
<Label>Read next</Label> <Label>Read next</Label>
{title} {title}
</Link> </span>
<Link to={to} hidden className={classes.icon} aria-hidden="true"> <span className={classes.icon}>
<Icon name="arrowright" /> <Icon name="arrowright" aria-hidden="true" />
</Link> </span>
</div> </Link>
) )
} }

2
website/src/styles/link.module.sass
View File

@ -7,7 +7,7 @@
&:hover &:hover
color: var(--color-front) color: var(--color-front)
.hidden .no-link-layout
border: none border: none
color: inherit color: inherit

12
website/src/templates/universe.js
View File

@ -94,14 +94,14 @@ const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComp
) )
return cover ? ( return cover ? (
<p key={id}> <p key={id}>
<Link key={id} to={url} hidden> <Link key={id} to={url} noLinkLayout>
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img src={cover} alt={title || id} /> <img src={cover} alt={title || id} />
</Link> </Link>
</p> </p>
) : data.id === 'videos' ? ( ) : data.id === 'videos' ? (
<div> <div>
<Link key={id} to={url} hidden> <Link key={id} to={url} noLinkLayout>
{header} {header}
<H5>{title}</H5> <H5>{title}</H5>
</Link> </Link>
@ -216,7 +216,7 @@ const Project = ({ data, components }) => (
<p> <p>
{data.spacy_version && <SpaCyVersion version={data.spacy_version} />} {data.spacy_version && <SpaCyVersion version={data.spacy_version} />}
{data.github && ( {data.github && (
<Link to={`https://github.com/${data.github}`} hidden> <Link to={`https://github.com/${data.github}`} noLinkLayout>
<ImageGitHub <ImageGitHub
title={data.title || data.id} title={data.title || data.id}
url={`release/${data.github}/all.svg?style=flat-square`} url={`release/${data.github}/all.svg?style=flat-square`}
@ -304,7 +304,7 @@ const Project = ({ data, components }) => (
{data.author_links && data.author_links.twitter && ( {data.author_links && data.author_links.twitter && (
<Link <Link
to={`https://twitter.com/${data.author_links.twitter}`} to={`https://twitter.com/${data.author_links.twitter}`}
hidden noLinkLayout
ws ws
> >
<Icon width={18} name="twitter" inline /> <Icon width={18} name="twitter" inline />
@ -313,14 +313,14 @@ const Project = ({ data, components }) => (
{data.author_links && data.author_links.github && ( {data.author_links && data.author_links.github && (
<Link <Link
to={`https://github.com/${data.author_links.github}`} to={`https://github.com/${data.author_links.github}`}
hidden noLinkLayout
ws ws
> >
<Icon width={18} name="github" inline /> <Icon width={18} name="github" inline />
</Link> </Link>
)} )}
{data.author_links && data.author_links.website && ( {data.author_links && data.author_links.website && (
<Link to={data.author_links.website} hidden ws> <Link to={data.author_links.website} noLinkLayout ws>
<Icon width={18} name="website" inline /> <Icon width={18} name="website" inline />
</Link> </Link>
)} )}

2
website/src/widgets/styleguide.js
View File

@ -76,7 +76,7 @@ export const Patterns = () => {
<Label>{name}</Label> <Label>{name}</Label>
<span style={textStyle}> <span style={textStyle}>
by by
<Link to="https://dribbble.com/kemal" hidden style={linkStyle} ws> <Link to="https://dribbble.com/kemal" noLinkLayout style={linkStyle} ws>
Kemal Şanlı Kemal Şanlı
</Link> </Link>
</span> </span>