From 09e327b7c242cd27c9dae92fb4a719c0913ee350 Mon Sep 17 00:00:00 2001
From: Eevis Panula <eevajonna.panula@gmail.com>
Date: Thu, 10 Nov 2022 16:48:13 +0200
Subject: [PATCH] Add more descriptive accessible names for
 save/bookmark-buttons (#18583)

---
 .../javascripts/utilities/buildArticleHTML.js |  2 +-
 .../__snapshots__/Article.test.jsx.snap       |  8 +++----
 .../articles/components/SaveButton.jsx        |  4 ++--
 .../components/__tests__/SaveButton.test.jsx  | 22 ++++++++++---------
 app/views/articles/_single_story.html.erb     |  4 ++--
 config/locales/views/articles/en.yml          |  4 ++--
 config/locales/views/articles/fr.yml          |  4 ++--
 7 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index e7057067d..587dc9526 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -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>
diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
index aa5a5582c..0115a3110 100644
--- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
+++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
@@ -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
diff --git a/app/javascript/articles/components/SaveButton.jsx b/app/javascript/articles/components/SaveButton.jsx
index 7334c5b14..c8b5988da 100644
--- a/app/javascript/articles/components/SaveButton.jsx
+++ b/app/javascript/articles/components/SaveButton.jsx
@@ -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
diff --git a/app/javascript/articles/components/__tests__/SaveButton.test.jsx b/app/javascript/articles/components/__tests__/SaveButton.test.jsx
index 81305ad7e..aefd6d6cb 100644
--- a/app/javascript/articles/components/__tests__/SaveButton.test.jsx
+++ b/app/javascript/articles/components/__tests__/SaveButton.test.jsx
@@ -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,
   });
 
diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb
index 173a13267..6b428976b 100644
--- a/app/views/articles/_single_story.html.erb
+++ b/app/views/articles/_single_story.html.erb
@@ -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>
diff --git a/config/locales/views/articles/en.yml b/config/locales/views/articles/en.yml
index ef7825d54..6b50f67d1 100644
--- a/config/locales/views/articles/en.yml
+++ b/config/locales/views/articles/en.yml
@@ -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:
diff --git a/config/locales/views/articles/fr.yml b/config/locales/views/articles/fr.yml
index 08d02c377..c6b98227f 100644
--- a/config/locales/views/articles/fr.yml
+++ b/config/locales/views/articles/fr.yml
@@ -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: