[UPDATE] added story name to aria label (#2158)

app/views/categories/show.html.erb

@@ -26,7 +26,8 @@
 					link: edit_category_path(@category)
 				},
 				visible: get_visible(@category.visible)
-			}
+			},
+			storyName: @category.name
 		}) %>
 	</div>
 </div>

app/views/groups/_info.html.erb

@@ -33,7 +33,8 @@
           dataConfirm: t('common.actions.confirm'),
           dataMethod: 'delete'
         } : nil
-      }
+      },
+      storyName: local_assigns[:group].name
     }) %>
   </div>
 </div>

app/views/medications/show.html.erb

@@ -20,7 +20,8 @@
             dataConfirm: t('common.actions.confirm'),
             dataMethod: 'delete'
           }
-        }
+        },
+        storyName: @medication.name
       }) %>
     </div>
     <%= print_reminders(@medication) %>

app/views/meetings/show.html.erb

@@ -27,7 +27,8 @@
             dataConfirm: t('common.actions.confirm'),
             dataMethod: 'delete'
           }
-        }.merge(google_cal_actions(@meeting))
+        }.merge(google_cal_actions(@meeting)),
+        storyName: @meeting.name
       }) %>
     </div>
   </div>

app/views/moments/show.html.erb

@@ -89,7 +89,8 @@
               dataConfirm:  t('common.actions.confirm')
             },
             viewers: get_viewer_list(@moment.viewers, nil)
-          }
+          },
+          storyName: @moment.name
         }) %>
       </div>
       <% if @moment.shared? %>

app/views/moods/show.html.erb

@@ -26,7 +26,8 @@
 					link: edit_mood_path(@mood)
 				},
 				visible: get_visible(@mood.visible)
-			}
+			},
+			storyName: @mood.name
 		}) %>
 	</div>
 </div>

app/views/strategies/show.html.erb

@@ -41,7 +41,8 @@
             },
             viewers: get_viewer_list(@strategy.viewers, nil),
             visible: get_visible(@strategy.visible)
-          }
+          },
+          storyName: @strategy.name
         }) %>
       </div>
       <%= print_reminders(@strategy) %>

client/app/components/Story/StoryActions.jsx

@@ -24,6 +24,7 @@ export type Action = {
   dataMethod?: string,
   dataConfirm?: string,
   onClick?: Function,
+  commentBy?: string,
 };
 
 export type Actions = {
@@ -40,6 +41,7 @@ export type Actions = {
 
 export type Props = {
   actions: Actions,
+  storyName?: string,
   hasStory?: boolean,
   dark?: boolean,
 };
@@ -111,16 +113,24 @@ const displayNonLink = (
 
 const titleItem = (item: string) => item.charAt(0).toUpperCase() + item.slice(1);
 
-const tooltipElement = (item: string, actions: Actions, dark: ?boolean) => {
+const tooltipElement = (
+  item: string,
+  actions: Actions,
+  storyName: ?string,
+  dark: ?boolean,
+) => {
   const {
-    link, dataMethod, dataConfirm, name, onClick,
+    link, dataMethod, dataConfirm, name, onClick, commentBy,
   } = actions[item];
+
+  const ariaLabel = commentBy || `${name} ${storyName || ''}`;
+
   return (
     <a
       href={link}
       data-method={dataMethod}
       data-confirm={dataConfirm}
-      aria-label={name}
+      aria-label={ariaLabel}
       onClick={
         onClick
           ? (e: SyntheticEvent<HTMLInputElement>) => onClick(e, link)
@@ -135,12 +145,13 @@ const tooltipElement = (item: string, actions: Actions, dark: ?boolean) => {
 const displayLink = (
   actions: Actions,
   item: string,
+  storyName: ?string,
   hasStory: ?boolean,
   dark: ?boolean,
 ) => (
   <div key={item} className={`storyActions${titleItem(item)}`}>
     <Tooltip
-      element={tooltipElement(item, actions, dark)}
+      element={tooltipElement(item, actions, storyName, dark)}
       text={actions[item].name}
       right={!!hasStory}
     />
@@ -150,17 +161,20 @@ const displayLink = (
 const displayItem = (
   actions: Actions,
   item: string,
+  storyName: ?string,
   hasStory: ?boolean,
   dark: ?boolean,
 ) => {
   if (item === VIEWERS || item === VISIBLE || item === SHARE_LINK_INFO) {
     return displayNonLink(actions, item, hasStory, dark);
   }
-  return displayLink(actions, item, hasStory, dark);
+  return displayLink(actions, item, storyName, hasStory, dark);
 };
 
 export const StoryActions = (props: Props): Node => {
-  const { actions, hasStory, dark } = props;
+  const {
+    actions, hasStory, dark, storyName,
+  } = props;
   return (
     <div className={css.actions}>
       {[
@@ -174,7 +188,9 @@ export const StoryActions = (props: Props): Node => {
         VISIBLE,
         VIEWERS,
         SHARE_LINK_INFO,
-      ].map((item: string) => (actions[item] ? displayItem(actions, item, hasStory, dark) : null))}
+      ].map((item: string) => (actions[item]
+        ? displayItem(actions, item, storyName, hasStory, dark)
+        : null))}
     </div>
   );
 };

client/app/components/Story/index.jsx

@@ -45,12 +45,15 @@ const renderHeader = (
         {draft && <StoryDraft draft={draft} />}
         <StoryName name={name} link={link} onClick={onClick} />
       </div>
-      {condensed && actions && <StoryActions actions={actions} hasStory />}
+      {condensed && actions && (
+        <StoryActions actions={actions} hasStory storyName={name} />
+      )}
     </div>
   </div>
 );
 
 const renderInfo = (
+  name: string,
   storyBy: ?StoryByProps,
   storyType: ?string,
   actions: ?Actions,
@@ -61,7 +64,9 @@ const renderInfo = (
       <StoryBy author={storyBy.author} avatar={storyBy.avatar} />
       <div className={css.infoRight}>
         <div className={css.storyType}>{storyType}</div>
-        {actions && <StoryActions actions={actions} hasStory />}
+        {actions && (
+          <StoryActions actions={actions} hasStory storyName={name} />
+        )}
       </div>
     </div>
   );
@@ -88,6 +93,7 @@ const renderMedicationBody = ({
 );
 
 const renderFooter = (
+  name: string,
   categories: ?(Category[]),
   moods: ?(Mood[]),
   storyBy: ?StoryByProps,
@@ -97,7 +103,7 @@ const renderFooter = (
   <div className={css.footer}>
     {categories && <StoryCategories categories={categories} />}
     {moods && <StoryMoods moods={moods} />}
-    {renderInfo(storyBy, storyType, actions)}
+    {renderInfo(name, storyBy, storyType, actions)}
   </div>
 );
 
@@ -122,7 +128,7 @@ export const Story = ({
       {date && <StoryDate date={date} />}
       {body && <div className={css.body}>{Utils.renderContent(body)}</div>}
       {medicationBody && renderMedicationBody(medicationBody)}
-      {renderFooter(categories, moods, storyBy, storyType, actions)}
+      {renderFooter(name, categories, moods, storyBy, storyType, actions)}
     </div>
   );
 };

client/app/pages/MomentTemplates/__tests__/MomentTemplates.spec.jsx

@@ -69,11 +69,17 @@ describe('MomentTemplates', () => {
         expect(screen.getByText(premadeOne.name)).toBeInTheDocument();
         expect(screen.getByText(premadeTwo.name)).toBeInTheDocument();
         expect(
-          container.querySelectorAll('a[aria-label="Edit"]').length,
-        ).toEqual(2);
+          container.querySelectorAll('a[aria-label="Edit Basic"]').length,
+        ).toEqual(1);
         expect(
-          container.querySelectorAll('a[aria-label="Delete"]').length,
-        ).toEqual(2);
+          container.querySelectorAll('a[aria-label="Delete Basic"]').length,
+        ).toEqual(1);
+        expect(
+          container.querySelectorAll('a[aria-label="Edit Gratitude"]').length,
+        ).toEqual(1);
+        expect(
+          container.querySelectorAll('a[aria-label="Delete Gratitude"]').length,
+        ).toEqual(1);
       });
     });
   });

client/app/widgets/CarePlanContacts/__tests__/index.spec.jsx

@@ -45,7 +45,7 @@ describe('CarePlanContacts', () => {
       });
       const { container } = render(component);
 
-      const editLink = container.querySelector('a[aria-label="Edit"]');
+      const editLink = container.querySelector('a[aria-label="Edit Test1 Lastname"]');
       expect(screen.queryByText('Edit Contact')).not.toBeInTheDocument();
 
       await userEvent.click(editLink);
@@ -72,7 +72,7 @@ describe('CarePlanContacts', () => {
       const axiosPostSpy = jest.spyOn(axios, 'patch').mockRejectedValue(error);
       const { container } = render(component);
 
-      const editLink = container.querySelector('a[aria-label="Edit"]');
+      const editLink = container.querySelector('a[aria-label="Edit Test1 Lastname"]');
       expect(screen.queryByText('Edit Contact')).not.toBeInTheDocument();
 
       await userEvent.click(editLink);

client/app/widgets/Comments/__tests__/Comments.spec.jsx

@@ -86,7 +86,7 @@ describe('Comments', () => {
       expect(
         screen.getByRole('button', { name: 'Submit' }),
       ).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Report' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: `Report comment by ${getComment().commentByName}` })).toBeInTheDocument();
     });
 
     it('add and delete a comment', async () => {
@@ -106,7 +106,7 @@ describe('Comments', () => {
       await waitFor(() => expect(screen.getByRole('article')).toBeInTheDocument());
       expect(screen.getByRole('article')).toHaveTextContent('Hey');
 
-      await userEvent.click(screen.getByRole('link', { name: 'Delete' }));
+      await userEvent.click(screen.getByRole('link', { name: `Delete comment by ${getComment().commentByName}` }));
 
       await waitFor(() => expect(screen.queryByRole('article')).not.toBeInTheDocument());
     });
@@ -147,7 +147,7 @@ describe('Comments', () => {
       await waitFor(() => expect(screen.getByRole('article')).toBeInTheDocument());
       expect(screen.getByRole('article')).toHaveTextContent('Hey');
 
-      await userEvent.click(screen.getByRole('link', { name: 'Delete' }));
+      await userEvent.click(screen.getByRole('link', { name: `Delete comment by ${getComment().commentByName}` }));
 
       await waitFor(() => expect(screen.queryByRole('article')).not.toBeInTheDocument());
     });

client/app/widgets/Comments/index.jsx

@@ -59,9 +59,10 @@ export const Comments = ({ comments, formProps }: Props): Node => {
     });
   };
 
-  const reportAction = (uid: string, id: number) => ({
+  const reportAction = (uid: string, id: number, commentByName: string) => ({
     name: I18n.t('common.actions.report'),
     link: `/reports/new?uid=${uid}&comment_id=${id}`,
+    commentBy: I18n.t('comment.report_comment_by', { name: commentByName }),
   });
 
   const getActions = (
@@ -71,10 +72,11 @@ export const Comments = ({ comments, formProps }: Props): Node => {
     uid: string,
     id: number,
     commentByAdmin: Boolean,
+    commentByName: string,
   ) => {
     const actions = {};
     if (currentUserUid !== uid && !commentByAdmin) {
-      actions.report = reportAction(uid, id);
+      actions.report = reportAction(uid, id, commentByName);
     }
     if (viewers) {
       actions.viewers = viewers;
@@ -85,6 +87,7 @@ export const Comments = ({ comments, formProps }: Props): Node => {
         link: deleteAction,
         dataConfirm: I18n.t('common.actions.confirm'),
         onClick: onDeleteClick,
+        commentBy: I18n.t('comment.delete_comment_by', { name: commentByName }),
       };
     }
     return actions;
@@ -118,6 +121,7 @@ export const Comments = ({ comments, formProps }: Props): Node => {
               commentByUid,
               id,
               commentByAdmin,
+              commentByName,
             )}
             hasStory
           />

config/locales/de.yml

@@ -118,6 +118,8 @@ de:
     allow_comments: Kommentare erlauben?
     hint: Nur Du und Betrachter können kommentieren
     control: 'Kontrolliere, wer dies sehen und kommentieren kann'
+    report_comment_by: 'Kommentar melden von %{name}'
+    delete_comment_by: 'Kommentar löschen von %{name}'
   account:
     singular: Konto
     sign_in: Einloggen

config/locales/en.yml

@@ -117,6 +117,8 @@ en:
     allow_comments: Allow Comments?
     hint: Only you and viewers can comment
     control: Control who can view and comment
+    report_comment_by: 'Report comment by %{name}'
+    delete_comment_by: 'Delete comment by %{name}'
   account:
     singular: Account
     sign_in: Sign in

config/locales/es.yml

@@ -117,6 +117,8 @@ es:
     allow_comments: ¿Permitir comentarios?
     hint: Solo tú y tu audiencia pueden comentar
     control: Controla quiénes pueden ver y comentar
+    report_comment_by: 'Reportar comentario por %{name}'
+    delete_comment_by: 'Eliminar comentario de %{name}'
   account:
     singular: Cuenta
     sign_in: Ingresar

config/locales/fr.yml

@@ -115,6 +115,8 @@ fr:
     allow_comments: Autoriser les commentaires ?
     hint: Seulement vous et les lecteurs peuvent ajouter des commentaires
     control: Contrôler qui peut lire et ajouter des commentaires
+    report_comment_by: 'Signaler un commentaire par %{name}'
+    delete_comment_by: 'Supprimer le commentaire par %{name}'
   account:
     singular: Compte
     sign_in: S'identifier

config/locales/hi.yml

@@ -117,6 +117,8 @@ hi:
     allow_comments: टिप्पणियों की अनुमति दें?
     hint: केवल आप और दर्शक टिप्पणी कर सकते हैं
     control: नियंत्रण जो देख सकता है और टिप्पणी कर सकता है
+    report_comment_by: 'टिप्पणी रिपोर्ट द्वारा %{name}'
+    delete_comment_by: 'टिप्पणी मिटाई द्वारा %{name}'
   account:
     singular: लेखा
     sign_in: दाखिल करना

config/locales/id.yml

@@ -117,6 +117,8 @@ id:
     allow_comments: Allow Comments?
     hint: Hanya Anda dan pemirsa yang dapat berkomentar
     control: Kontrol siapa yang dapat melihat dan berkomentar
+    report_comment_by: 'Laporkan komentar oleh %{name}'
+    delete_comment_by: 'Hapus komentar dengan %{name}'
   account:
     singular: Akun
     sign_in: Masuk

config/locales/it.yml

@@ -117,6 +117,8 @@ it:
     allow_comments: Permetti commenti?
     hint: Solo tu e i visualizzatori potete commentare
     control: Decidi chi può vedere e commentare
+    report_comment_by: 'Segnala commento di %{name}'
+    delete_comment_by: 'Elimina commento di %{name}'
   account:
     singular: Account
     sign_in: Accedi

config/locales/ko.yml

@@ -115,6 +115,8 @@ ko:
     allow_comments: 댓글을 허용하시겠습니까?
     hint: 당신과 조회한 사람들만이 댓글을 작성할 수 있습니다.
     control: 누가 볼 수 있고 댓글을 작성할 수 있는지 설정
+    report_comment_by: '댓글 신고 %{name}'
+    delete_comment_by: '댓글 삭제 %{name}'
   account:
     singular: 계정
     sign_in: 로그인