fix(a11y): address review feedback on accessibility fixes

- Fix malformed transition string in CopyButton and ExternalLink (missing
  closing brace on last token)
- Move aria-invalid into inputProps so it applies to both the default input
  and any custom renderInput renderer
- Clear hasError state on empty-string input path (was only cleared on
  valid range path, leaving aria-invalid=true after user clears the field)
- Add tabIndex={-1} to #main-content so skip link activation moves
  keyboard focus into the main region

Author: gabitoesmiapodo

src/components/sharedComponents/BigNumberInput.tsx

@@ -93,6 +93,7 @@ export const BigNumberInput: FC<BigNumberInputProps> = ({
     const { value } = typeof event === 'string' ? { value: event } : event.currentTarget
 
     if (value === '') {
+      setHasError(false)
       onChange(BigInt(0))
       return
     }
@@ -136,6 +137,7 @@ export const BigNumberInput: FC<BigNumberInputProps> = ({
   }
 
   const inputProps = {
+    'aria-invalid': (hasError || undefined) as true | undefined,
     disabled,
     onChange: updateValue,
     placeholder,
@@ -146,7 +148,6 @@ export const BigNumberInput: FC<BigNumberInputProps> = ({
     renderInput({ ...inputProps, inputRef })
   ) : (
     <chakra.input
-      aria-invalid={hasError || undefined}
       {...inputProps}
       ref={inputRef}
     />

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

@@ -85,7 +85,7 @@ export const CopyButton: FC<Props> = ({
         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

@@ -64,7 +64,7 @@ export const ExternalLinkButton: FC<LinkProps> = ({
         outlineOffset: '2px',
         borderRadius: '2px',
       }}
-      transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate"
+      transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate}"
       whiteSpace="nowrap"
       width="fit-content"
       _hover={{

src/routes/__root.tsx

@@ -49,6 +49,7 @@ function Root() {
               direction="column"
               flexGrow="1"
               id="main-content"
+              tabIndex={-1}
             >
               <Outlet />
             </Flex>