Skip to content

Implement accessibility enhancements and UX improvements - #637

Merged
Kingsman-99 merged 4 commits into
Stellar-split:mainfrom
lunabeckod-design:fix/accessibility-enhancements
Aug 29, 2026
Merged

Implement accessibility enhancements and UX improvements#637
Kingsman-99 merged 4 commits into
Stellar-split:mainfrom
lunabeckod-design:fix/accessibility-enhancements

Conversation

@lunabeckod-design

Copy link
Copy Markdown
Contributor

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.

@Kingsman-99
Kingsman-99 merged commit c73dd6f into Stellar-split:main Aug 29, 2026
0 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants