[Akpamgbo]

Description

This pull request addresses four assigned issues on the frontend components for the Stellar Payment API dashboard:

1. Implemented a comprehensive snapshot and user interaction test suite for the Activity Feed component.
2. Added WCAG 2.1 AA keyboard focus management, region semantics, and screen reader tables to the API Usage Chart.
3. Added a responsive slide-up drawer view with touch gesture swipe-down dismissal to the API Usage Chart for mobile viewports.
4. Added optimistic state refresh with automatic rollback and toast feedback on network failure to the API Usage Chart.

Closes #1655
Closes #1656
Closes #1657
Closes #1658

Changes proposed

What were you told to do?

• Issue [Frontend] Add comprehensive snapshot tests and user interaction test suite for Activity Feed Component #1655: Add comprehensive snapshot tests and user interaction test suite for ActivityFeed.tsx to improve styling, interaction handling, and overall accessibility.
• Issue [Frontend] Implement WCAG 2.1 AA keyboard focus management and screen reader labels in API Usage Chart #1656: Implement WCAG 2.1 AA keyboard focus management, region landmark attributes, visible focus indicators, and screen reader labels in ApiUsageChart.tsx.
• Issue [Frontend] Add responsive drawer view and touch gesture support to API Usage Chart #1657: Add responsive drawer view and touch gesture support (swipe down dismissal) to ApiUsageChart.tsx for mobile and compact viewports.
• Issue [Frontend] Implement optimistic state rollback with toast feedback upon network failure in API Usage Chart #1658: Implement optimistic state rollback with toast feedback upon network failure in ApiUsageChart.tsx.

What did I do?

Activity Feed Test Suite & UX (#1655)

• Created frontend/src/components/ActivityFeed.test.tsx testing loading skeletons, empty states, error retry actions, populated desktop table and mobile card rows, keyboard accessibility, real-time socket updates, and display preference formatting.
• Created frontend/src/components/__snapshots__/ActivityFeed.test.tsx.snap for snapshot test coverage.
• Enhanced ActivityFeed.tsx with test identifiers (data-testid) and an accessible inline Retry button in the error container.

WCAG 2.1 AA Keyboard Focus & Screen Reader Support (#1656)

• Wrapped ApiUsageChart.tsx with accessible region attributes (role="region", aria-label="API Usage Statistics", tabIndex={0}, focus rings).
• Added a screen-reader-only data table (<table className="sr-only">) with accessible caption and row descriptions so assistive technologies can read daily request metrics.
• Added aria-live="polite" on summary metrics so updates are announced to screen readers.

Responsive Drawer View & Touch Gestures (#1657)

• Added a mobile-only "View Details" button to trigger a slide-up drawer dialog displaying daily breakdown metrics with visual progress bars.
• Implemented touch gesture listeners (onTouchStart, onTouchMove, onTouchEnd) with tactile drag handle and swipe-down dismissal (>60px threshold).
• Supported keyboard Escape key dismissal and click-outside backdrop dismissal.

Optimistic State Rollback & Toast Feedback (#1658)

• Added manual "Refresh" button with optimistic updating state and spinning feedback.
• Preserved previous data snapshots via previousDataRef; on network failure, the component rolls back to the previous state.
• Displayed descriptive toast notifications via sonner (toast.error) with a "Retry" action on failure and success feedback on resolution.
• Updated ApiUsageChart.test.tsx and snapshots covering all new functionality.

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR is clear and explains the approach.
• I am making a pull request against the main branch (left side).
• My commit messages styles matches our requested structure.
• The implementation was reviewed and confirmed to work as intended.
• I am only making changes to files I was requested to.

Screenshots / Validation Evidence

• Verified snapshot tests and interaction tests for Activity Feed component.
• Verified WCAG 2.1 AA attributes (role="region", tabIndex={0}, sr-only table) and focus management.
• Verified touch gesture handling and drawer dialog in ApiUsageChart.tsx.
• Verified optimistic rollback logic and error toast dispatch on network errors.

[vercel]

@Akpamgbo is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.