fix(a11y): color contrast, skip link, focus rings, and aria attributes by gabitoesmiapodo · Pull Request #421 · BootNodeDev/dAppBooster

gabitoesmiapodo · 2026-03-23T21:45:00Z

Summary

Fix warning color contrast: #cc0 fails WCAG AA; #996600 (light) / #e6b800 (dark)
Fix danger/ok semantic tokens: add proper dark-mode variants (#ff6666, #66ee66)
Add skip-to-main-content link for keyboard navigation
Add aria-invalid to BigNumberInput on range validation failure
Replace outline:none with _focusVisible focus ring on CopyButton and ExternalLink
Add aria-label="Close" to icon-only close buttons in Modal and TokenInput
Add aria-label="View on explorer" to icon-only ExternalLink in Hash

Test plan

pnpm test passes
Verify focus ring visible on CopyButton and ExternalLink with keyboard
Verify skip link appears on Tab from address bar

vercel · 2026-03-23T21:45:05Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
components.dappbooster	Ready	Preview, Comment	Mar 24, 2026 0:04am
demo.dappbooster	Ready	Preview	Mar 24, 2026 0:04am
docs.dappbooster	Ready	Preview, Comment	Mar 24, 2026 0:04am

Copilot

Pull request overview

This PR improves accessibility across the app by addressing color-contrast issues, adding keyboard navigation support (skip link + focus rings), and improving screen-reader semantics with ARIA attributes.

Changes:

Update semantic color tokens (warning/ok/danger) to improve WCAG contrast in light/dark modes.
Add a skip-to-main-content link and restore visible focus styling for icon-only controls.
Add/extend ARIA attributes for validation and icon-only buttons/links.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/routes/__root.tsx	Adds a skip-to-main-content link and a `main-content` anchor target.
src/components/ui/provider.tsx	Updates semantic token colors for contrast-compliant warning/ok/danger states.
src/components/sharedComponents/ui/Modal/index.tsx	Adds `aria-label` to icon-only close button.
src/components/sharedComponents/ui/ExternalLink/index.tsx	Replaces `outline="none"` with `_focusVisible` focus ring styling.
src/components/sharedComponents/ui/CopyButton/index.tsx	Replaces `outline="none"` with `_focusVisible` focus ring styling.
src/components/sharedComponents/TokenInput/index.tsx	Adds `aria-label` to icon-only close button in the token dialog.
src/components/sharedComponents/Hash.tsx	Adds `aria-label` to icon-only explorer external link.
src/components/sharedComponents/BigNumberInput.tsx	Introduces `aria-invalid` wiring based on range validation failures.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-23T21:47:50Z

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

+        outlineOffset: '2px',
+        borderRadius: '2px',
+      }}
      transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate"


transition value looks malformed: the last token is missing the closing } (color {durations.moderate). This will likely result in an invalid CSS transition string and the transition being ignored. Close the token (and consider reusing the same corrected string wherever this pattern appears).

Suggested change

transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate"

transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate}"

Fixed: added the closing } to the last token.

Copilot · 2026-03-23T21:47:51Z

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

+        borderRadius: '2px',
+      }}
      textDecoration="none"
      transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate"


transition value looks malformed: the last token is missing the closing } (color {durations.moderate). This can invalidate the whole transition declaration. Close the token so Chakra can resolve the duration correctly.

Suggested change

transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate"

transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate}"

Fixed: same as above.

Copilot · 2026-03-23T21:47:51Z

src/components/sharedComponents/BigNumberInput.tsx

  const inputProps = {
    disabled,
    onChange: updateValue,
    placeholder,
    type: 'text',
  }

  return renderInput ? (
    renderInput({ ...inputProps, inputRef })
  ) : (
    <chakra.input
+      aria-invalid={hasError || undefined}
      {...inputProps}
      ref={inputRef}
    />


aria-invalid is only applied in the default <chakra.input> branch. When renderInput is provided (which appears to be the common path), the rendered input won’t receive aria-invalid on range validation failures. Consider adding aria-invalid to inputProps before calling renderInput, so both branches get it consistently.

Fixed: aria-invalid is now part of inputProps before the renderInput branch, so both paths receive it.

Copilot · 2026-03-23T21:47:51Z

src/routes/__root.tsx

              as="main"
              direction="column"
              flexGrow="1"
+              id="main-content"


Skip link target is a <main> element, which is not focusable by default. Following href="#main-content" may scroll but leave keyboard focus on the skip link, reducing its usefulness. Add tabIndex={-1} (or otherwise ensure the target can receive focus) so activation moves focus into main content.

Suggested change

id="main-content"

id="main-content"

tabIndex={-1}

Fixed: added tabIndex={-1} to the <Flex as="main"> element.

Copilot · 2026-03-23T21:47:51Z

src/components/sharedComponents/BigNumberInput.tsx

      }] and value is: ${value}`
      console.warn(message)
      onError?.({ value, message })
+      setHasError(true)
+    } else {
+      setHasError(false)
    }


hasError is only updated inside the min/max range check. Other early-return paths in updateValue (e.g. empty string, parseUnits failure, decimals-length guard) don’t clear hasError, so aria-invalid can remain true after the user fixes/clears the input. Consider resetting hasError (and optionally clearing onError) on those early returns to keep validity state accurate.

Fixed: setHasError(false) is now called on the empty-string early return path.

Copilot

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

src/components/sharedComponents/BigNumberInput.tsx:74

hasError is only updated inside updateValue, so if the parent updates value programmatically (e.g. reset to 0 / set max) after an out-of-range entry, aria-invalid can remain stuck true even though the new value is valid. Consider deriving/clearing hasError in an effect when value/min/max change, or resetting it whenever value is externally synchronized.

  const [hasError, setHasError] = useState(false)

  // update inputValue when value changes
  useEffect(() => {
    const current = inputRef.current

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-23T22:22:28Z

src/components/sharedComponents/BigNumberInput.tsx

  // update inputValue when value changes
  useEffect(() => {


In the useEffect that syncs the DOM input value, the parseUnits(...) call inside the effect can throw if the input currently contains an unparseable intermediate string (possible because updateValue returns early on parse errors). Since this effect runs on external value updates, an external update while the user has invalid text could crash rendering; wrap the parseUnits call in a try/catch or guard the string before parsing.

Fixed: wrapped parseUnits in a try/catch; on failure a sentinel value of BigInt(-1) forces the DOM value to be overwritten, ensuring the external value prop always wins when the current input is unparseable.

…butes - Fix warning color contrast: #cc0 fails WCAG AA; use #996600 (light) / #e6b800 (dark) - Fix danger/ok colors: add proper light/dark variants (#ff6666, #66ee66) for dark mode contrast - Add skip-to-main-content link in root layout for keyboard navigation - Add aria-invalid to BigNumberInput default input on range validation failure - Replace outline:none with _focusVisible focus ring on CopyButton and ExternalLink - Add aria-label="Close" to icon-only close buttons in Modal and TokenInput - Add aria-label="View on explorer" to icon-only ExternalLink in Hash component

- 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

An intermediate/unparseable input string while the user is typing could cause the useEffect that syncs the DOM value on external prop changes to throw. Wrap parseUnits in a try/catch and use a sentinel value to force the DOM overwrite when the current string is not parseable.

Copilot AI review requested due to automatic review settings March 23, 2026 21:45

Copilot started reviewing on behalf of gabitoesmiapodo March 23, 2026 21:45 View session

vercel bot deployed to Preview – components.dappbooster March 23, 2026 21:45 View deployment

vercel bot deployed to Preview – docs.dappbooster March 23, 2026 21:45 View deployment

vercel bot deployed to Preview – demo.dappbooster March 23, 2026 21:46 View deployment

Copilot AI reviewed Mar 23, 2026

View reviewed changes

gabitoesmiapodo mentioned this pull request Mar 23, 2026

feat: AI integration baseline #420

Open

5 tasks

gabitoesmiapodo force-pushed the test/demo-smoke branch from 88ed222 to 27b5511 Compare March 23, 2026 22:03

gabitoesmiapodo force-pushed the fix/a11y branch from b84e168 to 184f8ea Compare March 23, 2026 22:03

vercel bot deployed to Preview – components.dappbooster March 23, 2026 22:04 View deployment

vercel bot deployed to Preview – docs.dappbooster March 23, 2026 22:04 View deployment

vercel bot deployed to Preview – demo.dappbooster March 23, 2026 22:05 View deployment

gabitoesmiapodo force-pushed the test/demo-smoke branch from 27b5511 to 5d4e886 Compare March 23, 2026 22:17

gabitoesmiapodo force-pushed the fix/a11y branch from 184f8ea to 13e024b Compare March 23, 2026 22:17

vercel bot deployed to Preview – components.dappbooster March 23, 2026 22:18 View deployment

vercel bot deployed to Preview – docs.dappbooster March 23, 2026 22:18 View deployment

gabitoesmiapodo requested a review from Copilot March 23, 2026 22:18

vercel bot deployed to Preview – demo.dappbooster March 23, 2026 22:19 View deployment

Copilot started reviewing on behalf of gabitoesmiapodo March 23, 2026 22:19 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

gabitoesmiapodo force-pushed the test/demo-smoke branch from 5d4e886 to 5c9aa29 Compare March 23, 2026 23:25

gabitoesmiapodo force-pushed the fix/a11y branch from 13e024b to 3b7b376 Compare March 23, 2026 23:25

vercel bot deployed to Preview – components.dappbooster March 23, 2026 23:26 View deployment

vercel bot deployed to Preview – docs.dappbooster March 23, 2026 23:26 View deployment

vercel bot deployed to Preview – demo.dappbooster March 23, 2026 23:26 View deployment

vercel bot deployed to Preview – components.dappbooster March 24, 2026 00:01 View deployment

vercel bot deployed to Preview – docs.dappbooster March 24, 2026 00:01 View deployment

vercel bot deployed to Preview – demo.dappbooster March 24, 2026 00:02 View deployment

gabitoesmiapodo added 2 commits March 23, 2026 21:03

gabitoesmiapodo force-pushed the test/demo-smoke branch from 657ada0 to b0fe779 Compare March 24, 2026 00:03

gabitoesmiapodo force-pushed the fix/a11y branch from 22c9e54 to 6a2f37e Compare March 24, 2026 00:03

vercel bot deployed to Preview – components.dappbooster March 24, 2026 00:04 View deployment

vercel bot deployed to Preview – docs.dappbooster March 24, 2026 00:04 View deployment

vercel bot deployed to Preview – demo.dappbooster March 24, 2026 00:04 View deployment

	transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate"
	transition="background-color {durations.moderate}, border-color {durations.moderate}, color {durations.moderate}"

Conversation

gabitoesmiapodo commented Mar 23, 2026

Summary

Test plan

Uh oh!

vercel bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 23, 2026 •

edited

Loading