fix(a11y): color contrast, skip link, focus rings, and aria attributes

src/components/sharedComponents/BigNumberInput.tsx

@@ -6,6 +6,7 @@ import {
   type RefObject,
   useEffect,
   useRef,
+  useState,
 } from 'react'
 import { formatUnits, maxUint256, parseUnits } from 'viem'
 export type RenderInputProps = Omit<InputProps, 'onChange'> & {
@@ -66,14 +67,23 @@ export const BigNumberInput: FC<BigNumberInputProps> = ({
   value,
 }: BigNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
+  const [hasError, setHasError] = useState(false)
 
   // update inputValue when value changes
   useEffect(() => {
     const current = inputRef.current
     if (!current) {
       return
     }
-    const currentInputValue = parseUnits(current.value.replace(/,/g, '') || '0', decimals)
+    // The input may contain an intermediate/unparseable string while the user is
+    // typing; guard against a parseUnits throw so an external value update never
+    // crashes the effect.
+    let currentInputValue: bigint
+    try {
+      currentInputValue = parseUnits(current.value.replace(/,/g, '') || '0', decimals)
+    } catch {
+      currentInputValue = BigInt(-1) // sentinel: force the DOM value to be overwritten
+    }
 
     if (currentInputValue !== value) {
       current.value = formatUnits(value, decimals)
@@ -91,6 +101,7 @@ export const BigNumberInput: FC<BigNumberInputProps> = ({
     const { value } = typeof event === 'string' ? { value: event } : event.currentTarget
 
     if (value === '') {
+      setHasError(false)
       onChange(BigInt(0))
       return
     }
@@ -125,12 +136,16 @@ export const BigNumberInput: FC<BigNumberInputProps> = ({
       }] and value is: ${value}`
       console.warn(message)
       onError?.({ value, message })
+      setHasError(true)
+    } else {
+      setHasError(false)
     }
 
     onChange(newValue)
   }
 
   const inputProps = {
+    'aria-invalid': (hasError || undefined) as true | undefined,
     disabled,
     onChange: updateValue,
     placeholder,

src/components/sharedComponents/Hash.tsx

@@ -61,7 +61,12 @@ const Hash: FC<HashProps> = ({
           aria-label="Copy"
         />
       )}
-      {explorerURL && <ExternalLink href={explorerURL} />}
+      {explorerURL && (
+        <ExternalLink
+          aria-label="View on explorer"
+          href={explorerURL}
+        />
+      )}
     </Flex>
   )
 }

src/components/sharedComponents/TokenInput/index.tsx

@@ -202,7 +202,10 @@ const TokenInput: FC<Props> = ({
               showBalance={showBalance}
               showTopTokens={showTopTokens}
             >
-              <CloseButton onClick={() => setIsOpen(false)} />
+              <CloseButton
+                aria-label="Close"
+                onClick={() => setIsOpen(false)}
+              />
             </TokenSelect>
           </Dialog.Content>
         </Dialog.Positioner>

src/components/sharedComponents/ui/CopyButton/index.tsx

@@ -77,10 +77,15 @@ export const CopyButton: FC<Props> = ({
       height="fit-content"
       justifyContent="center"
       lineHeight="1"
-      outline="none"
       padding="0"
+      _focusVisible={{
+        outline: '2px solid',
+        outlineColor: 'primary.default',
+        outlineOffset: '2px',
+        borderRadius: '2px',
+      }}
       textDecoration="none"
-      transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate"
+      transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate}"
       userSelect="none"
       whiteSpace="nowrap"
       width="fit-content"

src/components/sharedComponents/ui/ExternalLink/index.tsx

@@ -41,6 +41,7 @@ const LinkSVG: FC<HTMLAttributes<SVGElement>> = ({ ...restProps }) => (
 export const ExternalLinkButton: FC<LinkProps> = ({
   children = <LinkSVG />,
   css,
+  rel = 'noopener noreferrer',
   target = '_blank',
   ...restProps
 }: LinkProps) => {
@@ -57,9 +58,14 @@ export const ExternalLinkButton: FC<LinkProps> = ({
       fontWeight="400"
       height="fit-content"
       justifyContent="center"
-      outline="none"
       padding="0"
-      transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate"
+      _focusVisible={{
+        outline: '2px solid',
+        outlineColor: 'primary.default',
+        outlineOffset: '2px',
+        borderRadius: '2px',
+      }}
+      transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate}"
       whiteSpace="nowrap"
       width="fit-content"
       _hover={{
@@ -73,6 +79,7 @@ export const ExternalLinkButton: FC<LinkProps> = ({
         cursor: 'not-allowed',
         opacity: 0.6,
       }}
+      rel={rel}
       target={target}
       {...restProps}
     >

src/components/sharedComponents/ui/Modal/index.tsx

@@ -84,7 +84,12 @@ export const Modal: FC<Props> = ({ css, children, title, onClose, text, ...restP
       >
         {title}
       </Heading>
-      {onClose && <CloseButton onClick={() => onClose()} />}
+      {onClose && (
+        <CloseButton
+          aria-label="Close"
+          onClick={() => onClose()}
+        />
+      )}
       {children ? children : 'No contents'}
       <Text
         borderRadius="md"

src/components/ui/provider.tsx

@@ -57,23 +57,23 @@ export function Provider(props: ColorModeProviderProps) {
             default: {
               value: {
                 _light: '#800',
-                _dark: '#800',
+                _dark: '#ff6666',
               },
             },
           },
           ok: {
             default: {
               value: {
-                _light: '#080',
-                _dark: '#080',
+                _light: '#006600',
+                _dark: '#66ee66',
               },
             },
           },
           warning: {
             default: {
               value: {
-                _light: '#cc0',
-                _dark: '#cc0',
+                _light: '#996600',
+                _dark: '#e6b800',
               },
             },
           },

src/routes/__root.tsx

@@ -7,7 +7,7 @@ import { Toaster } from '@/src/components/ui/toaster'
 import { TransactionNotificationProvider } from '@/src/providers/TransactionNotificationProvider'
 import { Web3Provider } from '@/src/providers/Web3Provider'
 import { printAppInfo } from '@/src/utils/printAppInfo'
-import { Flex } from '@chakra-ui/react'
+import { Flex, chakra } from '@chakra-ui/react'
 import { Outlet, createRootRoute } from '@tanstack/react-router'
 import { Analytics } from '@vercel/analytics/react'
 import { useEffect } from 'react'
@@ -30,11 +30,26 @@ function Root() {
             minH="100vh"
             w="100%"
           >
+            <chakra.a
+              bg="bg.default"
+              color="text.default"
+              href="#main-content"
+              left={0}
+              p={2}
+              position="absolute"
+              top="-100%"
+              zIndex="tooltip"
+              _focusVisible={{ top: 0 }}
+            >
+              Skip to main content
+            </chakra.a>
             <Header />
             <Flex
               as="main"
               direction="column"
               flexGrow="1"
+              id="main-content"
+              tabIndex={-1}
             >
               <Outlet />
             </Flex>

vite.config.ts

@@ -26,6 +26,7 @@ export default defineConfig({
   },
   test: {
     environment: 'jsdom',
+    exclude: ['**/node_modules/**', '.worktrees/**'],
     globals: true,
     setupFiles: ['./setupTests.ts'],
   },