maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add more descriptive accessible names for save/bookmark-buttons (#18583)

Browse source
This commit is contained in:
Eevis Panula 2022-11-10 16:48:13 +02:00 • committed by GitHub
parent e81dc39f13
commit 09e327b7c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/utilities/buildArticleHTML.js
View file

@ -285,7 +285,7 @@ function buildArticleHTML(article, currentUserId = null) {
class="c-btn c-btn--icon-alone bookmark-button"
data-reactable-id="${article.id}"
data-article-author-id="${article.user_id}"
aria-label="Save to reading list">
aria-label="Save post ${article.title} to reading list">
<span class="bm-initial">${saveSVG}</span>
<span class="bm-success">${saveFilledSVG}</span>
</button>

8
app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
View file

@ -243,13 +243,13 @@ Object {
1 min read
</small>
<button
aria-label="Save to reading list"
aria-label="Save post Unbranded Home Loan Account to reading list"
aria-pressed="false"
class="c-btn c-btn--icon-alone"
data-initial-feed="true"
data-reactable-id="62407"
id="article-save-button-62407"
title="Save to reading list"
title="Save post Unbranded Home Loan Account to reading list"
type="button"
>
<svg
@ -512,13 +512,13 @@ Object {
1 min read
</small>
<button
aria-label="Save to reading list"
aria-label="Save post Unbranded Home Loan Account to reading list"
aria-pressed="false"
class="c-btn c-btn--icon-alone"
data-initial-feed="true"
data-reactable-id="62407"
id="article-save-button-62407"
title="Save to reading list"
title="Save post Unbranded Home Loan Account to reading list"
type="button"
>
<svg

4
app/javascript/articles/components/SaveButton.jsx
View file

@ -24,8 +24,8 @@ export const SaveButton = ({
<Button
id={`article-save-button-${article.id}`}
variant="default"
title="Save to reading list"
aria-label="Save to reading list"
title={`Save post ${article.title} to reading list`}
aria-label={`Save post ${article.title} to reading list`}
aria-pressed={isBookmarked}
icon={isBookmarked ? BookmarkFilledSVG : BookmarkSVG}
data-initial-feed

22
app/javascript/articles/components/__tests__/SaveButton.test.jsx
View file

@ -22,10 +22,10 @@ it('should have no a11y violations', async () => {
});
it('should render button as bookmarked', () => {
const article = { class_name: 'Article', id: 1 };
const article = { class_name: 'Article', id: 1, title: 'Article' };
const { queryByRole } = render(<SaveButton article={article} isBookmarked />);
const saveButton = queryByRole('button', {
name: 'Save to reading list',
name: `Save post ${article.title} to reading list`,
pressed: true,
});
@ -33,12 +33,12 @@ it('should render button as bookmarked', () => {
});
it('should button as not being bookmarked', () => {
const article = { class_name: 'Article', id: 1 };
const article = { class_name: 'Article', id: 1, title: 'Article' };
const { queryByRole } = render(
<SaveButton article={article} isBookmarked={false} />,
);
const saveButton = queryByRole('button', {
name: 'Save to reading list',
name: `Save post ${article.title} to reading list`,
pressed: false,
});
@ -46,15 +46,17 @@ it('should button as not being bookmarked', () => {
});
it('should bookmark when it previously was not', async () => {
const article = { class_name: 'Article', id: 1 };
const article = { class_name: 'Article', id: 1, title: 'Article' };
const { getByRole, findByRole } = render(
<SaveButton onClick={jest.fn()} article={article} isBookmarked={false} />,
);
const saveButton = getByRole('button', { name: 'Save to reading list' });
const saveButton = getByRole('button', {
name: `Save post ${article.title} to reading list`,
});
saveButton.click();
const savedButton = await findByRole('button', {
name: 'Save to reading list',
name: `Save post ${article.title} to reading list`,
pressed: true,
});
@ -62,19 +64,19 @@ it('should bookmark when it previously was not', async () => {
});
it('should unbookmark when it previously was bookmarked', async () => {
const article = { class_name: 'Article', id: 1 };
const article = { class_name: 'Article', id: 1, title: 'Article' };
const { getByRole, findByRole } = render(
<SaveButton onClick={jest.fn()} article={article} isBookmarked />,
);
const savedButton = getByRole('button', {
name: 'Save to reading list',
name: `Save post ${article.title} to reading list`,
pressed: true,
});
savedButton.click();
const saveButton = await findByRole('button', {
name: 'Save to reading list',
name: `Save post ${article.title} to reading list`,
pressed: false,
});

4
app/views/articles/_single_story.html.erb
View file

@ -153,8 +153,8 @@
class="c-btn c-btn--icon-alone bookmark-button"
data-reactable-id="<%= story.id %>"
data-article-author-id="<%= story.user_id %>"
aria-label="<%= t("views.articles.save.aria_label") %>"
title="<%= t("views.articles.save.title") %>">
aria-label="<%= t("views.articles.save.aria_label", title: story.title) %>"
title="<%= t("views.articles.save.title", title: story.title) %>">
<span class="bm-initial">
<%= inline_svg_tag("small-save.svg", alt: "", aria_hidden: true) %>
</span>

4
config/locales/views/articles/en.yml
View file

@ -62,8 +62,8 @@ en:
one: '#discuss <img src="%{image}" />%{count}'
other: '#discuss <img src="%{image}" />%{count}'
save:
title: Save to reading list
aria_label: Save to reading list
title: "Save post %{title} to reading list"
aria_label: "Save post %{title} to reading list"
initial: Save
success: Saved
scheduled:

4
config/locales/views/articles/fr.yml
View file

@ -59,8 +59,8 @@ fr:
one: '#discuss <img src="%{image}" />%{count}'
other: '#discuss <img src="%{image}" />%{count}'
save:
title: Save to reading list
aria_label: Save to reading list
title: "Save post %{title} to reading list"
aria_label: "Save post %{title} to reading list"
initial: Save
success: Saved
series: