Skip to content

Implement accessibility enhancements and UX improvements - #637

Open
lunabeckod-design wants to merge 4 commits into
Stellar-split:mainfrom
lunabeckod-design:fix/accessibility-enhancements
Open

Implement accessibility enhancements and UX improvements#637
lunabeckod-design wants to merge 4 commits into
Stellar-split:mainfrom
lunabeckod-design:fix/accessibility-enhancements

Conversation

@lunabeckod-design

Copy link
Copy Markdown

Summary

This PR implements four key accessibility and UX enhancements:

  1. Breadcrumb Accessibility - Add aria-current="page" to the last breadcrumb item to properly indicate the current page location to screen reader users
  2. Skeleton Animation - Replace shimmer animation with a static muted background when prefers-reduced-motion is enabled, per WCAG 2.3.3
  3. Error Details - Add a "Copy error details" button to the ErrorBoundary UI to help developers and support teams capture error diagnostics
  4. Toast Progress - Add a countdown progress bar to Toast notifications that shows how long until auto-dismiss, with pause/resume on hover

Changes

  • Modified Breadcrumb component to mark the current page item with aria-current="page"
  • Updated Skeleton component to respect reduced-motion preferences via CSS media queries
  • Enhanced ErrorBoundary with clipboard copy functionality for error details
  • Extended Toast component with a progress bar that animates during the auto-dismiss duration
  • Added comprehensive tests for all new functionality

Test Coverage

All changes include tests to verify:

  • Component rendering and accessibility attributes
  • User interactions (click, hover, etc.)
  • Timing and animation behavior
  • State management for new features

Closes #576
Closes #575
Closes #574
Closes #573

The last breadcrumb item now includes aria-current='page' to properly indicate
the current page location to screen reader users, improving accessibility
per WCAG 2.3.3 standards.
…rs-reduced-motion

When prefers-reduced-motion is enabled, the skeleton shimmer animation is
replaced with a static muted background to comply with WCAG 2.3.3 and improve
accessibility for users sensitive to motion. The change is implemented via CSS
media queries for SSR compatibility.
Add a 'Copy error details' button to the ErrorBoundary fallback UI that copies
the error message and stack trace to the clipboard. The button shows a 'Copied!'
confirmation for 2 seconds after clicking, providing developers and support
teams with an easy way to capture error diagnostics without opening DevTools.
Add a progress bar at the bottom of Toast notifications that animates from 100%
to 0% over the auto-dismiss duration. The progress bar pauses when hovering over
the toast and resumes when the hover ends, giving users clear visual feedback
about how long the notification will remain visible.
@drips-wave

drips-wave Bot commented Aug 27, 2026

Copy link
Copy Markdown

@lunabeckod-design Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@lunabeckod-design is attempting to deploy a commit to the kingsman-99's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant