Improve per-page metadata and document semantics for accessibility and SEO
Description
Only src/app/settings/page.tsx, src/app/docs/page.tsx, and src/app/about/page.tsx export a metadata title; the client pages (pairs, quote, stats, admin, api-keys, events, webhooks) inherit only the default template from src/app/layout.tsx and provide no per-page description. The root <html lang="en"> also omits dir. Screen readers and search engines get no per-route context. This issue adds proper per-page metadata.
Requirements and context
- Repository scope: StableRoute-Org/Stableroute-frontend only.
- Give each route a meaningful
title and description via Next.js metadata. For the client ("use client") pages, add metadata by splitting a small server wrapper or co-locating an exported metadata where the App Router allows it (document the chosen approach).
- Add
dir="ltr" (and document how RTL would be supported) to <html> in layout.tsx to make the document direction explicit.
- Keep the existing default/template title and OpenGraph/Twitter config intact; do not regress the skip link or
#main-content target.
- Ensure titles follow the existing
%s — StableRoute template.
Suggested execution
- Fork the repo and create a branch
git checkout -b a11y/metadata-26-per-page-meta- Implement changes
- Write code in: the route files under
src/app and src/app/layout.tsx.
- Write comprehensive tests in: add a small test asserting representative pages export the expected
metadata (where exportable), plus a layout lang/dir assertion.
- Add documentation: note the metadata approach in
README.md.
- Add JSDoc/comments where a server wrapper is introduced.
- Validate titles use the template and descriptions are present.
- Test and commit
Test and commit
- Run
npm run lint, npm test, and npm run build.
- Cover edge cases: each route's title/description, template applied, and
lang/dir on <html>.
- Include the full
npm test output in the PR description.
Example commit message
a11y: add per-page metadata descriptions and explicit html dir
Guidelines
- Minimum 95 percent test coverage for impacted modules.
- Clear, reviewer-focused documentation.
- Timeframe: 96 hours.
Community & contribution rewards
- 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
- ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.
Improve per-page metadata and document semantics for accessibility and SEO
Description
Only
src/app/settings/page.tsx,src/app/docs/page.tsx, andsrc/app/about/page.tsxexport ametadatatitle; the client pages (pairs, quote, stats, admin, api-keys, events, webhooks) inherit only the default template fromsrc/app/layout.tsxand provide no per-pagedescription. The root<html lang="en">also omitsdir. Screen readers and search engines get no per-route context. This issue adds proper per-page metadata.Requirements and context
titleanddescriptionvia Next.jsmetadata. For the client ("use client") pages, add metadata by splitting a small server wrapper or co-locating an exportedmetadatawhere the App Router allows it (document the chosen approach).dir="ltr"(and document how RTL would be supported) to<html>inlayout.tsxto make the document direction explicit.#main-contenttarget.%s — StableRoutetemplate.Suggested execution
git checkout -b a11y/metadata-26-per-page-metasrc/appandsrc/app/layout.tsx.metadata(where exportable), plus a layoutlang/dirassertion.README.md.Test and commit
npm run lint,npm test, andnpm run build.lang/diron<html>.npm testoutput in the PR description.Example commit message
a11y: add per-page metadata descriptions and explicit html dirGuidelines
Community & contribution rewards