feat: improve Skeleton components with ARIA attributes, children support, and AssetRowSkeleton#72
Open
K1NGD4VID wants to merge 21 commits into
Open
feat: improve Skeleton components with ARIA attributes, children support, and AssetRowSkeleton#72K1NGD4VID wants to merge 21 commits into
K1NGD4VID wants to merge 21 commits into
Conversation
… and import ordering - Set @typescript-eslint/no-explicit-any to error (was off) - Set @typescript-eslint/no-unused-vars to error with argsIgnorePattern: ^_ - Add eslint-plugin-simple-import-sort for consistent import ordering - Fix all existing any cast usages across the codebase: - TransactionPanel.test.tsx: replace as any with vi.mocked() - mock-client.test.ts: replace as any with typed cast via unknown - vite.config.ts: remove unnecessary as any - Fix unused imports in FeeEstimator.test.tsx and QRCode.test.tsx - Auto-fix import ordering across all 55 source files Closes Sorokit#36
…ort, and AssetRowSkeleton
|
@K1NGD4VID 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! 🚀 |
- Skeleton.tsx: combine SkeletonCard's ARIA attributes with upstream's structure/children props - BalanceList.tsx: import AssetRowSkeleton from @/components/ui/Skeleton - AssetBadge.tsx: remove duplicate AssetRowSkeleton (now in Skeleton.tsx) - Sidebar.tsx: deduplicate imports - AccountScreen.tsx: deduplicate imports, remove unused User02Icon - eslint.config.js: combine strict rules with react-hooks plugin
- WalletConnectButton.test.tsx: add mockUseSorokit helper, use vi.mocked() - WalletScreen.test.tsx: add createMockState helper, use vi.mocked() - SorobanPanel.test.tsx: cast through unknown instead of any - QRCode.test.tsx: use proper spy type and unknown cast
- Keep working implementations of components over stubs from upstream - Combine eslint rules - Use new adapter architecture in main.tsx
- lib/adapter.ts: replace any with unknown and handle errors safely - lib/mock-client.ts: remove unused type imports
Collaborator
|
Hi kindly, resolve your conflict |
- Fix mock-client.ts to return proper SorokitClient shape with wallet, account, transaction, soroban, network sub-objects - Fix MOCK_ADDRESS to be 56 chars (valid Stellar key format) - Fix App.tsx to use SorokitProvider + ConnectScreen/Dashboard routing - Fix App.test.tsx to pass mock client prop - Fix main.tsx to use mock client adapter - Fix SorobanScreen.test.tsx for duplicate 'Soroban' text - Fix TransactionsScreen.test.tsx for duplicate 'Send Payment' text - Fix utils.test.ts truncateAddress expected value - Fix SorokitProvider.test.tsx render count (2 -> 3) - Fix __tests__/mock-client.test.ts for new createMockClient API
…SorokitProvider, and mock-client tests
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR improves the Skeleton component family to address three gaps: inaccessible loading states, rigid SkeletonCard layout, and layout shift in BalanceList.
Closes #37.
Changes
1. ARIA attributes for screen readers (WCAG 4.1.3)
SkeletonandSkeletonRow— addedrole="presentation"so screen readers skip placeholder cellsSkeletonCard— addedrole="status",aria-busy="true", andaria-label="Loading content"on the root element so AT announces the loading state2. SkeletonCard accepts
childrenfor custom skeleton layoutsBefore: hardcoded
rowsfull-width lines in the body, no way to match actual content structure.After: when
childrenare provided, they render inside the card body instead of the default rows. Consumers can now pass the exact skeleton layout matching their card content.The
rowsprop still works as a fallback when no children are given.3. AssetRowSkeleton — zero layout shift in BalanceList
Created
AssetRowSkeletoninAssetBadge.tsxthat matchesAssetRow's exact layout:BalanceListnow usesAssetRowSkeletoninstead of the genericSkeletonRow, eliminating layout shift between loading and loaded states.Verification
npm run lint→ 0 errorstsc --noEmit→ passes cleanly