Add accessible description for creator price chart data points#384
Merged
Conversation
…for-price-chart Add accessible creator chart descriptions and display name normalization
|
@Johnpii1 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! 🚀 |
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
Description
Add a display-only normaliser normalizeCreatorDisplayName that trims and collapses internal whitespace without mutating stored values (src/utils/creatorDisplayName.utils.ts).
Add getCreatorPriceChartAccessibilityCopy to derive a screen-reader summary and hidden data points from the same price inputs used by the chart (src/utils/creatorPriceChartAccessibility.utils.ts).
Wire the display-name normaliser into card/profile/trade/breadcrumb surfaces (CreatorCard, CreatorProfileHeader, TradeDialog, CreatorBreadcrumb) so UI copy and share titles use the cleaned name while source values remain unchanged.
Render accessible chart markup in the creator card by adding an role="img" with an aria-label driven by the accessibility helper and an sr-only HTML table containing the chart points so non-visual users can access the underlying values (src/components/common/CreatorCard.tsx).
Add targeted unit/component tests for the new helpers and the card accessibility integration (src/utils/tests/creatorDisplayName.utils.test.ts, src/utils/tests/creatorPriceChartAccessibility.utils.test.ts, src/components/common/tests/CreatorCard.accessibility.test.tsx).
Testing
Testing
Ran the new targeted tests with pnpm exec vitest run src/utils/tests/creatorDisplayName.utils.test.ts src/utils/tests/creatorPriceChartAccessibility.utils.test.ts src/components/common/tests/CreatorCard.accessibility.test.tsx and they passed.
Type-checking with pnpm exec tsc -b completed successfully.
Linting with pnpm lint succeeded and prettier formatting was applied.
Production build with pnpm build completed successfully (Vite emitted size/annotation warnings only).
A full pnpm test run surfaced unrelated existing failures/timeouts in other test files outside this change set, but these failures are pre-existing and not caused by this PR.
pnpm lintpnpm buildChecklist
close #369