mirror of
https://github.com/explosion/spaCy.git
synced 2024-09-21 03:19:13 +03:00
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 <ines@ines.io>
This commit is contained in:
Marcus Blättermann
GitHub
parent
0a70696923
commit
49237f05a6
|
|
@ -33,7 +33,7 @@ export default function Accordion({ title, id, expanded = false, spaced = false,
|
|||
<Link
|
||||
to={`#${id}`}
|
||||
className={classes.anchor}
|
||||
hidden
|
||||
noLinkLayout
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
¶
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default function Card({ title, to, image, header, small, onClick, childre
|
|||
return (
|
||||
<div className={classNames(classes.root, { [classes.small]: !!small })}>
|
||||
{header && (
|
||||
<Link to={to} onClick={onClick} hidden>
|
||||
<Link to={to} onClick={onClick} noLinkLayout>
|
||||
{header}
|
||||
</Link>
|
||||
)}
|
||||
|
|
@ -23,13 +23,13 @@ export default function Card({ title, to, image, header, small, onClick, childre
|
|||
</div>
|
||||
)}
|
||||
{title && (
|
||||
<Link to={to} onClick={onClick} hidden>
|
||||
<Link to={to} onClick={onClick} noLinkLayout>
|
||||
{title}
|
||||
</Link>
|
||||
)}
|
||||
</H5>
|
||||
)}
|
||||
<Link to={to} onClick={onClick} hidden>
|
||||
<Link to={to} onClick={onClick} noLinkLayout>
|
||||
{children}
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -363,7 +363,7 @@ const JuniperWrapper = ({ title, lang, children }) => {
|
|||
{juniperTitle}
|
||||
<span className={classes['juniper-meta']}>
|
||||
spaCy v{binderVersion} · Python 3 · via{' '}
|
||||
<Link to="https://mybinder.org/" hidden>
|
||||
<Link to="https://mybinder.org/" noLinkLayout>
|
||||
Binder
|
||||
</Link>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ const Image = ({ src, alt, title, href, ...props }) => {
|
|||
return (
|
||||
<figure className="gatsby-resp-image-figure">
|
||||
{href ? (
|
||||
<Link className={linkClassNames} href={href} hidden forceExternal>
|
||||
<Link className={linkClassNames} href={href} noLinkLayout forceExternal>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className={classes.image} src={src} alt={alt} width={650} height="auto" />
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default function Footer({ wide = false }) {
|
|||
<li className={classes.label}>{label}</li>
|
||||
{items.map(({ text, url }, j) => (
|
||||
<li key={j}>
|
||||
<Link to={url} hidden>
|
||||
<Link to={url} noLinkLayout>
|
||||
{text}
|
||||
</Link>
|
||||
</li>
|
||||
|
|
@ -42,14 +42,14 @@ export default function Footer({ wide = false }) {
|
|||
<div className={classNames(classes.content, classes.copy)}>
|
||||
<span>
|
||||
© 2016-{new Date().getFullYear()}{' '}
|
||||
<Link to={companyUrl} hidden>
|
||||
<Link to={companyUrl} noLinkLayout>
|
||||
{company}
|
||||
</Link>
|
||||
</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} />
|
||||
</Link>
|
||||
<Link to={`${companyUrl}/legal`} hidden>
|
||||
<Link to={`${companyUrl}/legal`} noLinkLayout>
|
||||
Legal / Imprint
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
|
|||
return (
|
||||
<>
|
||||
<header className={classes.header}>
|
||||
<Link to={url} hidden>
|
||||
<Link to={url} noLinkLayout>
|
||||
<Icon name="github" width={16} inline />
|
||||
<code
|
||||
className={classNames(classes['inline-code'], classes['inline-code-dark'])}
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ export const LandingBanner = ({
|
|||
<span className={classes['label']}>{label}</span>
|
||||
</div>
|
||||
)}
|
||||
<Link to={to} hidden>
|
||||
<Link to={to} noLinkLayout>
|
||||
{title}
|
||||
</Link>
|
||||
</Heading>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const NavigationDropdown = ({ items = [], section }) => {
|
|||
|
||||
export default function Navigation({ title, items = [], section, search, alert, children }) {
|
||||
const logo = (
|
||||
<Link to="/" aria-label={title} hidden>
|
||||
<Link to="/" aria-label={title} noLinkLayout>
|
||||
<h1 className={classes.title}>{title}</h1>
|
||||
<SVG src={logoSpacy.src} className={classes.logo} width={300} height={96} />
|
||||
</Link>
|
||||
|
|
@ -57,7 +57,7 @@ export default function Navigation({ title, items = [], section, search, alert,
|
|||
})
|
||||
return (
|
||||
<li key={i} className={itemClassNames}>
|
||||
<Link to={url} tabIndex={isActive ? '-1' : null} hidden>
|
||||
<Link to={url} tabIndex={isActive ? '-1' : null} noLinkLayout>
|
||||
{text}
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@ import classes from '../styles/readnext.module.sass'
|
|||
|
||||
export default function ReadNext({ title, to }) {
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Link to={to} hidden>
|
||||
<Link to={to} noLinkLayout className={classes.root}>
|
||||
<span>
|
||||
<Label>Read next</Label>
|
||||
{title}
|
||||
</span>
|
||||
<span className={classes.icon}>
|
||||
<Icon name="arrowright" aria-hidden="true" />
|
||||
</span>
|
||||
</Link>
|
||||
<Link to={to} hidden className={classes.icon} aria-hidden="true">
|
||||
<Icon name="arrowright" />
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
&:hover
|
||||
color: var(--color-front)
|
||||
|
||||
.hidden
|
||||
.no-link-layout
|
||||
border: none
|
||||
color: inherit
|
||||
|
||||
|
|
|
|||
|
|
@ -94,14 +94,14 @@ const UniverseContent = ({ content = [], categories, theme, pageContext, mdxComp
|
|||
)
|
||||
return cover ? (
|
||||
<p key={id}>
|
||||
<Link key={id} to={url} hidden>
|
||||
<Link key={id} to={url} noLinkLayout>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={cover} alt={title || id} />
|
||||
</Link>
|
||||
</p>
|
||||
) : data.id === 'videos' ? (
|
||||
<div>
|
||||
<Link key={id} to={url} hidden>
|
||||
<Link key={id} to={url} noLinkLayout>
|
||||
{header}
|
||||
<H5>{title}</H5>
|
||||
</Link>
|
||||
|
|
@ -216,7 +216,7 @@ const Project = ({ data, components }) => (
|
|||
<p>
|
||||
{data.spacy_version && <SpaCyVersion version={data.spacy_version} />}
|
||||
{data.github && (
|
||||
<Link to={`https://github.com/${data.github}`} hidden>
|
||||
<Link to={`https://github.com/${data.github}`} noLinkLayout>
|
||||
<ImageGitHub
|
||||
title={data.title || data.id}
|
||||
url={`release/${data.github}/all.svg?style=flat-square`}
|
||||
|
|
@ -304,7 +304,7 @@ const Project = ({ data, components }) => (
|
|||
{data.author_links && data.author_links.twitter && (
|
||||
<Link
|
||||
to={`https://twitter.com/${data.author_links.twitter}`}
|
||||
hidden
|
||||
noLinkLayout
|
||||
ws
|
||||
>
|
||||
<Icon width={18} name="twitter" inline />
|
||||
|
|
@ -313,14 +313,14 @@ const Project = ({ data, components }) => (
|
|||
{data.author_links && data.author_links.github && (
|
||||
<Link
|
||||
to={`https://github.com/${data.author_links.github}`}
|
||||
hidden
|
||||
noLinkLayout
|
||||
ws
|
||||
>
|
||||
<Icon width={18} name="github" inline />
|
||||
</Link>
|
||||
)}
|
||||
{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 />
|
||||
</Link>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export const Patterns = () => {
|
|||
<Label>{name}</Label>
|
||||
<span style={textStyle}>
|
||||
by
|
||||
<Link to="https://dribbble.com/kemal" hidden style={linkStyle} ws>
|
||||
<Link to="https://dribbble.com/kemal" noLinkLayout style={linkStyle} ws>
|
||||
Kemal Şanlı
|
||||
</Link>
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user