Skip to content
This repository has been archived by the owner on Apr 26, 2024. It is now read-only.

Commit

Permalink
fix: contributors list screen reader announcement (#2889)
Browse files Browse the repository at this point in the history 
* fix how AuthorList is announced by Screen Reader

* Update snapshots

* Add translate func to aria label for github author link

* Fix failing test-ci checks

* Move new translations to end of file

* Remove defineMessages and move to inline translation

* move inline translation to const
  • Loading branch information
@EmmaDawsonDev
EmmaDawsonDev committed Oct 10, 2022
1 parent fae54d8 commit cfda51d
Show file tree
Hide file tree
Showing 16 changed files with 54 additions and 42 deletions.
24 changes: 12 additions & 12 deletions src/components/Article/__tests__/__snapshots__/index.test.tsx.snap
View file
Expand Up @@ -90,29 +90,29 @@ exports[`Article component renders correctly 1`] = `
<ul>
<li>
<a
aria-label="test-user1 Github - opens in new tab"
class="link"
href="https://github.com/test-user1"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="test-user1"
>
<img
alt="test-user1"
alt=""
src="https://github.com/test-user1.png?size=60"
/>
</a>
</li>
<li>
<a
aria-label="test-user2 Github - opens in new tab"
class="link"
href="https://github.com/test-user2"
rel="noopener noreferrer"
target="_blank"
title="test-user2"
>
<img
alt="test-user2"
alt=""
src="https://github.com/test-user2.png?size=60"
/>
</a>
Expand Down Expand Up @@ -363,29 +363,29 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
<ul>
<li>
<a
aria-label="test-user1 Github - opens in new tab"
class="link"
href="https://github.com/test-user1"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="test-user1"
>
<img
alt="test-user1"
alt=""
src="https://github.com/test-user1.png?size=60"
/>
</a>
</li>
<li>
<a
aria-label="test-user2 Github - opens in new tab"
class="link"
href="https://github.com/test-user2"
rel="noopener noreferrer"
target="_blank"
title="test-user2"
>
<img
alt="test-user2"
alt=""
src="https://github.com/test-user2.png?size=60"
/>
</a>
Expand Down Expand Up @@ -569,29 +569,29 @@ exports[`Article component should accept and render child components 1`] = `
<ul>
<li>
<a
aria-label="test-user1 Github - opens in new tab"
class="link"
href="https://github.com/test-user1"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="test-user1"
>
<img
alt="test-user1"
alt=""
src="https://github.com/test-user1.png?size=60"
/>
</a>
</li>
<li>
<a
aria-label="test-user2 Github - opens in new tab"
class="link"
href="https://github.com/test-user2"
rel="noopener noreferrer"
target="_blank"
title="test-user2"
>
<img
alt="test-user2"
alt=""
src="https://github.com/test-user2.png?size=60"
/>
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Author/__tests__/__snapshots__/index.test.tsx.snap
View file
Expand Up @@ -6,14 +6,14 @@ exports[`Author component renders correctly 1`] = `
<div>
<li>
<a
aria-label="test-author Github - opens in new tab"
class="link"
href="https://github.com/test-author"
rel="noopener noreferrer"
target="_blank"
title="test-author"
>
<img
alt="test-author"
alt=""
src="https://github.com/test-author.png?size=60"
/>
</a>
Expand Down
12 changes: 10 additions & 2 deletions src/components/Author/index.tsx
View file
@@ -1,4 +1,5 @@
import React from 'react';
import { useIntl } from 'react-intl';
import styles from './index.module.scss';

interface Props {
Expand All @@ -12,6 +13,8 @@ const Author = ({
username,
size = '64',
}: Props): null | JSX.Element => {
const intl = useIntl();

if (username) {
// Clean up username and build links.
const githubUserName = username.trim();
Expand All @@ -21,18 +24,23 @@ const Author = ({
// If it's the first author then no margin left.
const mleft = index === 0 ? { marginLeft: 0 } : {};

const translation = intl.formatMessage(
{ id: 'components.author.githubLinkLabel' },
{ username }
);

return (
<li>
<a
className={styles.link}
href={githubLink}
title={username}
aria-label={translation}
key={username}
target="_blank"
rel="noopener noreferrer"
style={mleft}
>
<img src={githubImgLink} alt={username} />
<img src={githubImgLink} alt="" />
</a>
</li>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
View file
Expand Up @@ -325,15 +325,15 @@ exports[`PageLayout component renders correctly with data 1`] = `
<ul>
<li>
<a
aria-label="mock-author Github - opens in new tab"
class="link"
href="https://github.com/mock-author"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="mock-author"
>
<img
alt="mock-author"
alt=""
src="https://github.com/mock-author.png?size=60"
/>
</a>
Expand Down
8 changes: 4 additions & 4 deletions src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap
View file
Expand Up @@ -9,29 +9,29 @@ exports[`AuthorsList component renders correctly 1`] = `
<ul>
<li>
<a
aria-label="test-author Github - opens in new tab"
class="link"
href="https://github.com/test-author"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="test-author"
>
<img
alt="test-author"
alt=""
src="https://github.com/test-author.png?size=60"
/>
</a>
</li>
<li>
<a
aria-label="another-test-author Github - opens in new tab"
class="link"
href="https://github.com/another-test-author"
rel="noopener noreferrer"
target="_blank"
title="another-test-author"
>
<img
alt="another-test-author"
alt=""
src="https://github.com/another-test-author.png?size=60"
/>
</a>
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/en.json
View file
Expand Up @@ -85,5 +85,6 @@
"components.sideBar.section.download": "Download",
"components.sideBar.items.previousReleases": "Previous Releases",
"components.sideBar.items.codeOfConduct": "Code of Conduct",
"components.sideBar.section.blog": "Node.js Blog"
"components.sideBar.section.blog": "Node.js Blog",
"components.author.githubLinkLabel": "{username} Github - opens in new tab"
}
3 changes: 2 additions & 1 deletion src/i18n/locales/es.json
View file
Expand Up @@ -85,5 +85,6 @@
"components.sideBar.section.download": "Download",
"components.sideBar.items.previousReleases": "Previous Releases",
"components.sideBar.items.codeOfConduct": "Code of Conduct",
"components.sideBar.section.blog": "Node.js Blog"
"components.sideBar.section.blog": "Node.js Blog",
"components.author.githubLinkLabel": "{username} Github - opens in new tab"
}
3 changes: 2 additions & 1 deletion src/i18n/locales/fr.json
View file
Expand Up @@ -85,5 +85,6 @@
"components.sideBar.section.download": "Télécharger",
"components.sideBar.items.previousReleases": "Anciennes versions",
"components.sideBar.items.codeOfConduct": "Code de conduite",
"components.sideBar.section.blog": "Node.js Blog"
"components.sideBar.section.blog": "Node.js Blog",
"components.author.githubLinkLabel": "{username} Github - opens in new tab"
}
3 changes: 2 additions & 1 deletion src/i18n/locales/zh-cn.json
View file
Expand Up @@ -85,5 +85,6 @@
"components.sideBar.section.download": "下载",
"components.sideBar.items.previousReleases": "以前的版本",
"components.sideBar.items.codeOfConduct": "行为准则",
"components.sideBar.section.blog": "Node.js 博客"
"components.sideBar.section.blog": "Node.js 博客",
"components.author.githubLinkLabel": "{username} Github - opens in new tab"
}
4 changes: 2 additions & 2 deletions src/pages/about/__tests__/__snapshots__/governance.test.tsx.snap
View file
Expand Up @@ -218,15 +218,15 @@ exports[`Governance Page renders correctly 1`] = `
<ul>
<li>
<a
aria-label="author-mock Github - opens in new tab"
class="link"
href="https://github.com/author-mock"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="author-mock"
>
<img
alt="author-mock"
alt=""
src="https://github.com/author-mock.png?size=60"
/>
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/about/__tests__/__snapshots__/index.test.tsx.snap
View file
Expand Up @@ -217,15 +217,15 @@ exports[`About page renders correctly 1`] = `
<ul>
<li>
<a
aria-label="author-mock Github - opens in new tab"
class="link"
href="https://github.com/author-mock"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="author-mock"
>
<img
alt="author-mock"
alt=""
src="https://github.com/author-mock.png?size=60"
/>
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/about/__tests__/__snapshots__/releases.test.tsx.snap
View file
Expand Up @@ -340,15 +340,15 @@ exports[`Releases page renders correctly 1`] = `
<ul>
<li>
<a
aria-label="author-mock Github - opens in new tab"
class="link"
href="https://github.com/author-mock"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="author-mock"
>
<img
alt="author-mock"
alt=""
src="https://github.com/author-mock.png?size=60"
/>
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
View file
Expand Up @@ -450,15 +450,15 @@ exports[`Resources page renders correctly 1`] = `
<ul>
<li>
<a
aria-label="MrJithil Github - opens in new tab"
class="link"
href="https://github.com/MrJithil"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="MrJithil"
>
<img
alt="MrJithil"
alt=""
src="https://github.com/MrJithil.png?size=60"
/>
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/about/__tests__/__snapshots__/security.test.tsx.snap
View file
Expand Up @@ -218,15 +218,15 @@ exports[`Security page renders correctly 1`] = `
<ul>
<li>
<a
aria-label="author-mock Github - opens in new tab"
class="link"
href="https://github.com/author-mock"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="author-mock"
>
<img
alt="author-mock"
alt=""
src="https://github.com/author-mock.png?size=60"
/>
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
View file
Expand Up @@ -451,15 +451,15 @@ exports[`Package Manager Page renders correctly 1`] = `
<ul>
<li>
<a
aria-label="author-mock Github - opens in new tab"
class="link"
href="https://github.com/author-mock"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="author-mock"
>
<img
alt="author-mock"
alt=""
src="https://github.com/author-mock.png?size=60"
/>
</a>
Expand Down
8 changes: 4 additions & 4 deletions src/templates/__tests__/__snapshots__/learn.test.tsx.snap
View file
Expand Up @@ -335,29 +335,29 @@ exports[`Learn Template renders correctly 1`] = `
<ul>
<li>
<a
aria-label="test-user1 Github - opens in new tab"
class="link"
href="https://github.com/test-user1"
rel="noopener noreferrer"
style="margin-left: 0px;"
target="_blank"
title="test-user1"
>
<img
alt="test-user1"
alt=""
src="https://github.com/test-user1.png?size=60"
/>
</a>
</li>
<li>
<a
aria-label="test-user2 Github - opens in new tab"
class="link"
href="https://github.com/test-user2"
rel="noopener noreferrer"
target="_blank"
title="test-user2"
>
<img
alt="test-user2"
alt=""
src="https://github.com/test-user2.png?size=60"
/>
</a>
Expand Down

0 comments on commit cfda51d

Please sign in to comment.