refactor(a11y): move <li> wrapper from SidebarGroup to SidebarItem

Author: 72umesh

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx

@@ -25,9 +25,7 @@ const SidebarGroup: FC<SidebarGroupProps> = ({
     <label className={styles.groupName}>{groupName}</label>
     <ul className={styles.itemList}>
       {items.map(({ label, link }) => (
-        <li key={link}>
-          <SidebarItem label={label} link={link} {...props} />
-        </li>
+        <SidebarItem key={link} label={label} link={link} {...props} />
       ))}
     </ul>
   </section>

packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx

@@ -15,18 +15,20 @@ type SidebarItemProps = {
 };
 
 const SidebarItem: FC<SidebarItemProps> = ({ label, link, ...props }) => (
-  <BaseActiveLink
-    className={styles.item}
-    href={link}
-    activeClassName={styles.active}
-    {...props}
-  >
-    <div className={styles.label}>
-      <span>{label}</span>
+  <li>
+    <BaseActiveLink
+      className={styles.item}
+      href={link}
+      activeClassName={styles.active}
+      {...props}
+    >
+      <div className={styles.label}>
+        <span>{label}</span>
 
-      {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
-    </div>
-  </BaseActiveLink>
+        {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+      </div>
+    </BaseActiveLink>
+  </li>
 );
 
 export default SidebarItem;