Merge pull request #2977 from gets0ul/issue-2836

Fix for Issue #2836 - Read submenu link on hover

Author: sushilshinde

__tests__/shared/components/TopcoderHeader/desktop/SubMenu/Item.jsx

@@ -8,7 +8,7 @@ test('Matches shallow shapshot', () => {
   renderer.render((
     <Item
       currentSubMenuTitle="title"
-      icon="icon url"
+      icon={<div />}
       title="title"
       link="menu url"
     />
@@ -18,7 +18,7 @@ test('Matches shallow shapshot', () => {
   renderer.render((
     <Item
       currentSubMenuTitle="another title"
-      icon="icon url"
+      icon={<div />}
       title="title"
       link="menu url"
     />

__tests__/shared/components/TopcoderHeader/desktop/SubMenu/__snapshots__/Item.jsx.snap

@@ -11,7 +11,9 @@ exports[`Matches shallow shapshot 1`] = `
     openNewTab={false}
     to="menu url"
   >
-    icon url
+    <div
+      aria-label="title"
+    />
     title
   </Link>
 </li>
@@ -28,7 +30,9 @@ exports[`Matches shallow shapshot 2`] = `
     openNewTab={false}
     to="menu url"
   >
-    icon url
+    <div
+      aria-label="title"
+    />
     title
   </Link>
 </li>

src/shared/components/TopcoderHeader/desktop/SubMenu/Item/index.jsx

@@ -18,6 +18,7 @@ export default function Item({
 }) {
   let styleName = 'item';
   if (currentSubMenuTitle === title) styleName += ' current';
+  const accessibleIcon = React.cloneElement(icon, { 'aria-label': `${title}` });
   return (
     /* TODO: Should be done in a clean way, witout disabling eslint rules. */
     /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
@@ -29,7 +30,7 @@ export default function Item({
       tabIndex={0}
     >
       <Link enforceA={enforceA} openNewTab={openNewTab} to={link}>
-        {icon}
+        {accessibleIcon}
         {title}
       </Link>
     </li>