diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx index d87615b..41d21af 100644 --- a/src/components/CopyButton.tsx +++ b/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 && {buttonText}} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 246e99b..02e20bf 100644 --- a/src/components/Footer.tsx +++ b/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: }, - { href: 'https://discord.gg/pbt9m98wnU', icon: }, - { href: 'https://t.me/iexec_rlc_official', icon: }, + { + href: 'https://twitter.com/iEx_ec', + icon: , + ariaLabel: 'Twitter', + }, + { + href: 'https://discord.gg/pbt9m98wnU', + icon: , + ariaLabel: 'Discord', + }, + { + href: 'https://t.me/iexec_rlc_official', + icon: , + ariaLabel: 'Telegram', + }, { href: 'https://www.youtube.com/channel/UCwWxZWvKVHn3CXnmDooLWtA', icon: , + ariaLabel: 'YouTube', }, { href: 'https://www.linkedin.com/company/iex.ec/', icon: , + ariaLabel: 'LinkedIn', + }, + { + href: 'https://medium.com/iex-ec', + icon: , + ariaLabel: 'Medium', }, - { href: 'https://medium.com/iex-ec', icon: }, ]; return (
- {socialLinks.map(({ href, icon }, idx) => ( + {socialLinks.map(({ href, icon, ariaLabel }, idx) => ( diff --git a/src/modules/search/SearcherBar.tsx b/src/modules/search/SearcherBar.tsx index 6cd8623..349b481 100644 --- a/src/modules/search/SearcherBar.tsx +++ b/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) && ( -

+

)} @@ -174,14 +183,19 @@ export function SearcherBar({ />
-
-
-