feat: add accessibility attributes to social links in Footer and Block Explorer link in SmartLinkGroup; add role to Tabs component

Author: ErwanDecoster

src/components/Footer.tsx

@@ -15,22 +15,40 @@ import { Button } from './ui/button';
 
 function SocialLinksItems({ className }: { className?: string }) {
   const socialLinks = [
-    { href: 'https://twitter.com/iEx_ec', icon: <SiX size={16} /> },
-    { href: 'https://discord.gg/pbt9m98wnU', icon: <SiDiscord size={16} /> },
-    { href: 'https://t.me/iexec_rlc_official', icon: <SiTelegram size={16} /> },
+    {
+      href: 'https://twitter.com/iEx_ec',
+      icon: <SiX size={16} />,
+      arialLabel: 'Twitter',
+    },
+    {
+      href: 'https://discord.gg/pbt9m98wnU',
+      icon: <SiDiscord size={16} />,
+      ariaLabel: 'Discord',
+    },
+    {
+      href: 'https://t.me/iexec_rlc_official',
+      icon: <SiTelegram size={16} />,
+      ariaLabel: 'Telegram',
+    },
     {
       href: 'https://www.youtube.com/channel/UCwWxZWvKVHn3CXnmDooLWtA',
       icon: <SiYoutube size={16} />,
+      ariaLabel: 'YouTube',
     },
     {
       href: 'https://www.linkedin.com/company/iex.ec/',
       icon: <Linkedin size={16} />,
+      ariaLabel: 'LinkedIn',
+    },
+    {
+      href: 'https://medium.com/iex-ec',
+      icon: <SiMedium size={16} />,
+      ariaLabel: 'Medium',
     },
-    { href: 'https://medium.com/iex-ec', icon: <SiMedium size={16} /> },
   ];
   return (
     <div className={cn('flex', className)}>
-      {socialLinks.map(({ href, icon }, idx) => (
+      {socialLinks.map(({ href, icon, ariaLabel }, idx) => (
         <Button
           key={idx}
           asChild
@@ -41,7 +59,7 @@ function SocialLinksItems({ className }: { className?: string }) {
             href={href}
             target="_blank"
             rel="noopener noreferrer"
-            aria-label="Social link"
+            aria-label={ariaLabel}
           >
             {icon}
           </a>

src/components/SmartLinkGroup.tsx

@@ -107,6 +107,7 @@ export default function SmartLinkGroup({
                   href={`${getBlockExplorerUrl(chainId)}/${blockExplorerPath[type]}`}
                   target="_blank"
                   rel="noopener noreferrer"
+                  aria-label="Open in Block Explorer"
                 >
                   <ExternalLink className="text-foreground" />
                 </a>

src/modules/Tabs.tsx

@@ -72,6 +72,7 @@ export function Tabs({
             key={label}
             data-tab-index={index}
             variant="link"
+            role="radio"
             size={'none'}
             onClick={() => {
               if (!isDisabled) onTabChange(index);