Skip to content

feat: add creator profile section anchor links (#159)#181

Merged
Chucks1093 merged 1 commit into
accesslayerorg:mainfrom
Kaycee276:feat/159-creator-profile-anchor-links
Apr 26, 2026
Merged

feat: add creator profile section anchor links (#159)#181
Chucks1093 merged 1 commit into
accesslayerorg:mainfrom
Kaycee276:feat/159-creator-profile-anchor-links

Conversation

@Kaycee276

Copy link
Copy Markdown
Contributor

Closes #159

Adds URL hash anchor links for the main creator profile sections, enabling direct deep-linking, browser back/forward navigation between tabs, and shareable section URLs.

Changes

src/components/common/ProfileTabPill.tsx

  • Consolidated two duplicate useEffect calls into one, fixing a mount-time race where the initial hash read could fire before the hashchange listener was attached
  • Single effect: reads window.location.hash on mount and registers the hashchange listener
  • Added id="profile-tab-{value}" and aria-controls="profile-panel-{value}" to each tab button (ARIA wiring)

src/pages/LandingPage.tsx

  • activeProfileTab initial state now reads from window.location.hash — navigating to /#creations shows the correct tab immediately with no flash to Overview
  • Enabled enableHashRouting on ProfileTabPillGroup — clicking tabs updates the URL hash
  • Tab-panel <div> now carries id, role="tabpanel", aria-labelledby, and tabIndex={0} for complete semantic tab ↔ panel association

src/components/common/__tests__/ProfileTabPillGroup.test.tsx (new)

  • 8 unit tests covering: hash set on tab click, initial hash read on mount, hashchange listener response, no-op for matching hash, unknown hash fallback, id/aria-controls attributes, aria-selected only on active tab

docs/CreatorProfileAnchorLinks.md (new)

  • Implementation notes and manual verification steps

Acceptance criteria

  • Scoped change with no unrelated file churn
  • Docs added (docs/CreatorProfileAnchorLinks.md)
  • Tests added (8 passing tests in ProfileTabPillGroup.test.tsx)
  • Contributor can validate locally (see docs for steps)

- Enable enableHashRouting on ProfileTabPillGroup in LandingPage
- Initialise activeProfileTab from window.location.hash on first render
  so direct URL hash navigation (e.g. /#creations) works immediately
- Consolidate two duplicate useEffect calls in ProfileTabPillGroup into
  one effect that both syncs from the initial hash on mount and listens
  for subsequent hashchange events, eliminating a mount-time race
- Add id/aria-controls to each ProfileTabPill for tab ↔ panel ARIA wiring
- Wrap tab-panel content in a div with id, role=tabpanel, aria-labelledby,
  and tabIndex so the semantic relationship is complete
- Add ProfileTabPillGroup.test.tsx (8 tests) covering hash routing, ARIA
  attributes, initial hash read, hashchange listener, and edge cases
- Add docs/CreatorProfileAnchorLinks.md with implementation notes and
  manual verification steps
@drips-wave

drips-wave Bot commented Apr 26, 2026

Copy link
Copy Markdown

@Kaycee276 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

@Chucks1093 Chucks1093 merged commit 23252b9 into accesslayerorg:main Apr 26, 2026
1 check 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

Development

Successfully merging this pull request may close these issues.

Add creator profile section anchor links

2 participants