fix: add per-page metadata to dashboard, download, and community pages#11
Open
fix: add per-page metadata to dashboard, download, and community pages#11
Conversation
…links
Comprehensive accessibility pass covering the dashboard, navbar, and
secondary pages. Zero new dependencies, no feature regressions.
Changes by file:
web/src/app/dashboard/page.tsx
- Add <a href="#main-content"> skip link (keyboard users can bypass nav)
- Add id="main-content" to <main> anchor target
- Wrap stats card grid in role="region" aria-label for screen readers
- Add aria-label to each stat card with full readable description
- Mark decorative icons with aria-hidden="true"
- Add role="img" + aria-label to both chart containers describing data
- Add aria-label to <table> with visible result count
- Add scope="col" to all <th> elements (required for table semantics)
- Wrap result timestamps in <time dateTime={...}> for machine readability
- Add aria-label to ping and packet-loss <td> cells (color is not the
only indicator of quality — text label now read aloud by screen readers)
web/src/components/Navbar.tsx
- Add aria-label="Main navigation" to <nav> (landmark is now named)
- Add aria-haspopup="true" to mobile menu toggle button
- Add role="menu" + aria-label to mobile menu container
- Improve mobile toggle aria-label wording to be more descriptive
web/src/app/community/page.tsx
web/src/app/download/page.tsx
- Add skip-to-content link and id="main-content" (these pages were
missing both, making keyboard-only navigation significantly harder)
All three pages used 'use client' at the top level, which prevents
Next.js from exporting the metadata object. As a result, every page
shared the same generic homepage title and description — the
layout.tsx template ('%s | PingDiff') was dead code for these routes.
Fix: split each page into a thin server wrapper (exports metadata)
and a client component (holds all interactive state). This is the
standard App Router pattern for mixing metadata with client-side state.
Each page now has a distinct <title> and <meta description>:
/dashboard → 'Dashboard | PingDiff'
/download → 'Download | PingDiff'
/community → 'Community | PingDiff'
Also adds per-page og:title and og:description so social shares
(Twitter, Discord, iMessage) show accurate previews instead of the
generic homepage copy.
Build verified clean (no TypeScript or ESLint errors).
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
1 participant
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.
Problem
All three main pages (
/dashboard,/download,/community) had"use client"at the top level. In Next.js App Router, client components cannot exportmetadata— so every page fell back to the generic layout title/description. Thetemplate: "%s | PingDiff"inlayout.tsxwas dead code for these routes.Concrete impact:
Fix
Split each page into two files following the standard App Router pattern:
page.tsxmetadata, renders the client component*Client.tsxNo logic was changed; this is a pure structural refactor.
Result
Each page also gets its own
og:titleandog:descriptionfor correct social previews.Verification
npm run build— passes with no errorseslint— no lint errors introduced