feat: better accessibility (#110)

* feat: add tab navigation for app details and deals in AppsRoute component

* feat: add AppAccessTable component and integrate into AppsRoute

* feat: enhance AppAccessTable and AppDealsTable with loading and outdated state management

* feat: rename columns to appColumns and remove app address and price column

* feat: add tab navigation for dataset details, deals, and access in DatasetsRoute

* feat: integrate loading and outdated state management in DatasetDealsTable

* feat: add DatasetAccessTable component and integrate it into DatasetsRoute

* feat: add tab navigation for workerpool details, deals, and access

* feat: enhance WorkerpoolDealsTable with loading and outdated state management

* feat: add WorkerpoolAccessTable component and integrate it into WorkerpoolsRoute

* feat: refactor loading and outdated state management in access and deals tables using useEffect

* feat: add access tables for apps, datasets, and workerpools on address page

* fix: correct import path for WorkerpoolAccessTable component

* refactor: remove console logs from access data fetching functions

* feat: enhance pagination logic to display all pages for 7 or fewer total pages

* feat: update pagination logic to support mobile-first design and dynamic page visibility

* feat: update access data fetching logic to support pagination and total count for apps, datasets, and workerpools

* fix: prevent rendering of pagination controls for invalid states

* refactor: prettier

* fix: stabilize pagination rendering during lading state

* fix: normalize case for order restrictions in CopyButton components

* fix: useTabParam() name in dataset

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: correct error message wording in loading alerts across multiple tables

* feat: add accessibility attributes to buttons in CopyButton, Navbar, and SchemaSearch components

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

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

* feat: enhance accessibility in SearcherBar component; add ARIA roles and attributes to input and error messages

* fix: fix typo

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: improve accessibility roles in Navbar and Tabs components

* fix: update package-lock file

* fix: remove unnecessary id attributes for accessibility improvements

* fix: remove useless id attribute or ensure uniqueness. Also fix acessibility for tabs adding missing aria-selected attribute

* fix: remove useless implicite role=searchbox and invalid tabIndex

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Christophe Dolivet <christophe.dolivet@iex.ec>

Author: 3 people

src/components/CopyButton.tsx

@@ -65,6 +65,8 @@ const CopyButton = ({
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
               className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 flex items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
+              type="button"
+              aria-label="Copy"
             >
               {buttonText && <span className="mr-1 text-sm">{buttonText}</span>}
               <Copy className="size-4 flex-none" />

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} />,
+      ariaLabel: '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>
@@ -78,8 +96,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/PaginatedNavigation.tsx

@@ -95,6 +95,7 @@ export const PaginatedNavigation = ({
         pages.push(1, 'ellipsis', currentPage, 'ellipsis', stableTotalPages);
       }
     } else {
+      // Desktop: full pagination logic
       pages.push(1);
 
       if (currentPage <= 3) {

src/components/SmartLinkGroup.tsx

@@ -114,6 +114,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/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

@@ -33,8 +33,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() {
                   <button
                     type="button"
                     className="inline-flex items-center gap-2"
+                    aria-label="Logout"
                     onClick={() => logout()}
                   >
                     Logout
@@ -103,6 +108,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
           />
@@ -113,15 +119,21 @@ 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">
                 <AddressChip address={userAddress!} />
 
                 <button
                   type="button"
+                  aria-label="Logout"
                   className="hover:drop-shadow-link-hover p-1"
                   onClick={() => logout()}
                 >

src/modules/Tabs.tsx

@@ -62,6 +62,7 @@ export function Tabs({
           left: `${indicatorStyle.left}px`,
           width: `${indicatorStyle.width}px`,
         }}
+        role="tablist"
       />
 
       {tabLabels.map((label, index) => {
@@ -73,6 +74,8 @@ export function Tabs({
             key={label}
             data-tab-index={index}
             variant="link"
+            role="tab"
+            aria-selected={currentTab === index}
             size={'none'}
             onClick={() => {
               if (!isDisabled) onTabChange(index);

src/modules/datasets/SchemaSearch.tsx

@@ -46,6 +46,7 @@ export function SchemaSearch({
   return (
     <div className="rounded-2xl border">
       <button
+        aria-label="Toggle schema search filters"
         className={cn('flex w-full items-center gap-2 px-10 py-6 duration-200')}
         onClick={() => setIsOpen(!isOpen)}
       >
@@ -103,7 +104,11 @@ export function SchemaSearch({
                   >
                     <span className={cn('inline-block')}>{schema.path}</span>
                     <span className={cn('inline-block')}>: {schema.type}</span>
-                    <button onClick={() => onRemoveFilter(index)}>
+                    <button
+                      type="button"
+                      aria-label={`Remove filter ${schema.path} of type ${schema.type}`}
+                      onClick={() => onRemoveFilter(index)}
+                    >
                       <X className="ml-1" size={12} />
                     </button>
                   </span>

src/modules/search/SearcherBar.tsx

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate, useParams } from '@tanstack/react-router';
 import { Search } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { getIExec, getReadonlyIExec } from '@/externals/iexecSdkClient';
@@ -20,6 +20,7 @@ export function SearcherBar({
   initialSearch?: string;
 }) {
   const { isConnected } = useUserStore();
+  const searchErrorId = useId();
   const [inputValue, setInputValue] = useState('');
   const [shake, setShake] = useState(false);
   const [errorCount, setErrorCount] = useState(0);
@@ -154,6 +155,9 @@ export function SearcherBar({
           onChange={(e) => setInputValue(e.target.value)}
           onKeyDown={handleKeyDown}
           disabled={isPending}
+          type="search"
+          aria-label="Search for addresses, deal IDs, task IDs, or transaction hashes"
+          aria-describedby={localError || error ? searchErrorId : undefined}
           className={cn(
             'bg-muted border-secondary w-full rounded-2xl py-5.5 pl-12 sm:py-6.5',
             isConnected && 'sm:pr-32',
@@ -164,7 +168,12 @@ export function SearcherBar({
           placeholder="Search address, deal id, task id, transaction hash..."
         />
         {(localError || error) && (
-          <p className="bg-danger text-danger-foreground border-danger-border absolute -bottom-8 rounded-full border px-4">
+          <p
+            id={searchErrorId}
+            role="alert"
+            aria-live="polite"
+            className="bg-danger text-danger-foreground border-danger-border absolute -bottom-8 rounded-full border px-4"
+          >
             {localError ? localError.message : error?.message}
           </p>
         )}
@@ -174,14 +183,19 @@ export function SearcherBar({
         />
       </div>
 
-      <div
-        className={cn(
-          'mt-4 flex justify-center gap-4 sm:hidden',
-          isError && 'mt-10'
-        )}
-      >
-        <div className="flex justify-center">
-          <Button variant="outline" onClick={handleSearch} disabled={isPending}>
+      <div className={cn('mt-4 flex justify-center gap-4', isError && 'mt-10')}>
+        <div className="flex justify-center sm:sr-only">
+          <Button
+            variant="outline"
+            onClick={handleSearch}
+            disabled={isPending}
+            type="button"
+            aria-label={
+              isPending
+                ? 'Searching in progress'
+                : 'Search for the entered value'
+            }
+          >
             {isPending ? 'Searching...' : 'Search'}
           </Button>
         </div>