[UPDATE] added story name to aria label

client/app/components/Story/StoryActions.jsx

@@ -40,6 +40,7 @@ export type Actions = {
 
 export type Props = {
   actions: Actions,
+  storyName: string,
   hasStory?: boolean,
   dark?: boolean,
 };
@@ -111,16 +112,17 @@ 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,
   } = actions[item];
+  const ariaLabel = `${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 +137,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 +153,18 @@ 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 +178,7 @@ 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,13 @@ 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 +62,7 @@ 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 +89,7 @@ const renderMedicationBody = ({
 );
 
 const renderFooter = (
+  name: string,
   categories: ?(Category[]),
   moods: ?(Mood[]),
   storyBy: ?StoryByProps,
@@ -97,7 +99,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 +124,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/widgets/Comments/index.jsx

@@ -120,6 +120,7 @@ export const Comments = ({ comments, formProps }: Props): Node => {
               commentByAdmin,
             )}
             hasStory
+            storyName={comment}
           />
         </div>
       </article>

doc/pages/blurbs.json

@@ -682,5 +682,14 @@
     "link_name": "manishsharma.ml",
     "link": "https://manishsharma.ml",
     "social": "globe"
+  },
+  {
+    "name": "Nikhil Bhatt",
+    "image": "/assets/contributors/nikhil_bhatt.jpg",
+    "profile": "Techie, who loves to solve the real world problems using code. Currently, I'm working as a Full stack developer in Ruby on Rails and React",
+    "location": "Bengaluru, India",
+    "link_name": "nikhilbhatt",
+    "link": "https://github.com/nikhilbhatt",
+    "social": "github"
   }
 ]