Add aria-sort attributes and screen-reader sort announcements to components/transactions/sort.tsx

[Jagadeeshftw]

Description

components/transactions/sort.tsx toggles the active sort column and direction visually (via an icon) but never sets aria-sort on the associated column header, so screen reader users have no way to determine which column is currently driving the order.

Requirements and context

• Set aria-sort="ascending"/"descending"/"none" on the relevant based on the active sort state
• Announce the new sort order via an aria-live region when the user changes it
• Confirm the sort control is operable with Enter and Space
• Must be accessible (WCAG 2.1 AA), responsive, and consistent with existing design tokens
• Should be tested and easy to review

Suggested execution

Fork the repo and create a branch

git checkout -b a11y/transactions-sort-aria

Implement changes

• Update/Write component(s): components/transactions/sort.tsx
• Add/Update tests: components/transactions/sort.test.tsx
• Add documentation: design/a11y-checklist.md
• Annotate accessibility (contrast, keyboard nav, ARIA)
• Validate responsive behavior across breakpoints (sm 640, md 768, lg 1024, xl 1280)

Test and commit

• Run tests: pnpm test (or the repo's test command)
• Cover edge cases (empty/error/loading states, long text, RTL, dark mode)
• Include before/after screenshots and accessibility notes

Example commit message

fix: add aria-sort semantics and live announcements to transactions sort

Guidelines

• WCAG 2.1 AA compliance
• Clear documentation and spec hand-off
• Timeframe: 96 hours

[Emelie-Dev]

@Emelie-Dev has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi, I would love to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Emelie-Dev to this issue.

[drips-wave]

Congratulations, @Emelie-Dev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Emelie-Dev: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been marked as completed by a Drips Wave moderator for @Emelie-Dev as part of the Stellar Wave Program's 7th Wave 🥳

Moderator's reason: [Auto-assessed] The contributor has thoroughly addressed all requirements of the issue, including adding aria-sort attributes, aria-live announcements, and keyboard operability for Enter and Space keys. The PR includes comprehensive tests covering these new accessibility features, and the single failing CI check (Vercel deployment) is a non-actionable environment gate requiring maintainer authorization.

😎 @Emelie-Dev: You earned 400 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.

[grainlify]

@Emelie-Dev was removed as assignee: no matching application for this issue was found on Grainlify. Maintainers can only assign contributors who applied through the platform.