feat(ui): add reusable Breadcrumb component with JSON-LD and ARIA sup… - #245
Merged
SYLVIANNORUKA merged 2 commits intoJul 31, 2026
Merged
Conversation
…port
- Add Breadcrumb component (src/components/ui/Breadcrumb.tsx)
- Props: items: { label: string; href?: string }[]
- Renders Home / Courses / Page with ChevronRight separators
- Last item is a plain <span> with aria-current='page', never a link
- Wraps in <nav aria-label='Breadcrumb'> for screen reader support
- Emits Schema.org BreadcrumbList JSON-LD via <script> tag
- Absolute URLs in JSON-LD via absoluteUrl() from lib/seo
- Mobile truncation: collapses to [first, ..., last] beyond 4 items
- Integrate Breadcrumb into pages
- courses/[id]: Home > Courses > course title
- dashboard/courses/[id]: Dashboard > My Courses > course title
- dashboard/courses/[id]/learn: Dashboard > My Courses > course > lesson
- dashboard/certificates: Dashboard > Certificates
- dashboard/profile: Dashboard > Profile
- dashboard/settings: Dashboard > Settings
- Add Breadcrumb.test.tsx (20 tests, all passing)
- Rendering, link rendering, ARIA attributes, separators
- JSON-LD structure and absolute URL validation
- Mobile truncation and single-item edge cases
- Fix vitest.config.ts: replace broken esbuild.jsx option with
@vitejs/plugin-react plugin so TSX files parse correctly
- Install missing devDependencies: vitest, @vitejs/plugin-react,
jsdom, mdn-data
|
@Mathew2k-hash 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.
feat(ui): Breadcrumb navigation component with JSON-LD and ARIA support
Summary
Adds a reusable Breadcrumb component and integrates it across course detail,
learn, and dashboard sub-pages so users always have clear location context.
Changes
New component — src/components/ui/Breadcrumb.tsx
Home / Courses / JavaScript Masterclass
item
- Schema.org BreadcrumbList JSON-LD injected via
<script type="application/ld+json"> — uses absolute URLs via absoluteUrl() for Rich Results compliance - Mobile truncation: collapses to First › … › Last when trail exceeds 4 items Page integrations | Page | Trail | |---|---| | /courses/[id] | Home › Courses › Course title | | /dashboard/courses/[id] | Dashboard › My Courses › Course title | | /dashboard/courses/[id]/learn | Dashboard › My Courses › Course title › Lesson title | | /dashboard/certificates | Dashboard › Certificates | | /dashboard/profile | Dashboard › Profile | | /dashboard/settings | Dashboard › Settings | Tests — src/components/ui/Breadcrumb.test.tsx 20 tests covering: rendering, link vs plain-text items, ARIA attributes, chevron separators, JSON-LD schema output and absolute URL validation, mobile truncation, and edge cases (empty list, single item). Infra fixes - Fixed vitest.config.ts: replaced broken esbuild.jsx option with @vitejs/plugin-react plugin so .tsx files parse correctly in the test runner - Installed missing devDependencies: vitest, @vitejs/plugin-react, jsdom, mdn-data ## Testing bash npx vitest run src/components/ui/Breadcrumb.test.tsx # 20 passed, 0 failed ## Checklist - [x] Breadcrumb renders all items with separators - [x] Last item is not a link - [x] JSON-LD BreadcrumbList output included - [x] aria-label="Breadcrumb" and aria-current="page" correct - [x] All 20 tests passing closes #116