feat: add accessibility attributes to ChainLink and Button components in Footer, Navbar, and AddressChip

Author: ErwanDecoster

src/components/Footer.tsx

@@ -78,8 +78,12 @@ export function Footer({ className }: { className?: string }) {
       )}
     >
       <div className="flex flex-col items-center justify-between gap-10 xl:flex-row">
-        <ChainLink to="/" className="flex items-center gap-2 font-mono">
-          <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
+        <ChainLink
+          to="/"
+          aria-label="Home"
+          className="flex items-center gap-2 font-mono"
+        >
+          <img src={iExecLogo} width="25" height="25" alt="" />
           <span>iExec Explorer</span>
         </ChainLink>
 

src/components/ModeToggle.tsx

@@ -34,7 +34,7 @@ export function ModeToggle() {
             size="none"
             role="radio"
             aria-checked={selected}
-            aria-label={label}
+            aria-label={`Toggle ${label} mode`}
             title={label}
             className={cn(
               'text-foreground hover:bg-muted p-1',

src/components/navbar/AddressChip.tsx

@@ -42,6 +42,7 @@ export function AddressChip({ address }: { address: string }) {
           <Button
             className="dark:bg-popover bg-primary-foreground hover:bg-muted text-primary dark:text-brand duration-300"
             variant="secondary"
+            aria-label="Copy connected wallet address"
             onClick={handleCopy}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}

src/components/navbar/NavBar.tsx

@@ -19,8 +19,12 @@ export function Navbar() {
 
   return (
     <nav className="flex items-center justify-between py-6">
-      <ChainLink to="/" className="-m-2 flex items-center gap-2 p-2 font-mono">
-        <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
+      <ChainLink
+        to="/"
+        aria-label="Home"
+        className="-m-2 flex items-center gap-2 p-2 font-mono"
+      >
+        <img src={iExecLogo} width="25" height="25" alt="" />
         <span className="hidden lg:block">iExec Explorer</span>
       </ChainLink>
       <div className="mr-8 flex items-center gap-4 md:mr-0">
@@ -76,6 +80,7 @@ export function Navbar() {
             className="absolute -inset-2 size-10 cursor-pointer appearance-none bg-transparent"
             name="menu"
             id="menu"
+            aria-label="Toggle navigation menu"
             checked={isMenuOpen}
             readOnly
           />
@@ -86,8 +91,13 @@ export function Navbar() {
 
         <div className="border-secondary bg-background pointer-events-auto fixed inset-y-0 left-0 z-10 flex w-full -translate-x-full flex-col overflow-auto rounded-r-3xl border-r px-6 pt-6 duration-200 group-has-[:checked]:translate-x-0 lg:w-[255px] lg:translate-x-0">
           <div className="-m-2 mr-6 flex items-center justify-between gap-2 py-2 pl-2">
-            <ChainLink to="/" className="font-mono" onClick={handleMenuToggle}>
-              <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
+            <ChainLink
+              to="/"
+              aria-label="Home"
+              className="font-mono"
+              onClick={handleMenuToggle}
+            >
+              <img src={iExecLogo} width="25" height="25" alt="" />
             </ChainLink>
             {isConnected ? (
               <div className="flex max-w-[1260px] items-center gap-2">