Skip to content

feat(website): redesign UX across landing and all listing pages#2191

Closed
IEvangelist wants to merge 3 commits into
github:mainfrom
IEvangelist:dapine/website-ux-redesign
Closed

feat(website): redesign UX across landing and all listing pages#2191
IEvangelist wants to merge 3 commits into
github:mainfrom
IEvangelist:dapine/website-ux-redesign

Conversation

@IEvangelist

@IEvangelist IEvangelist commented Jul 2, 2026

Copy link
Copy Markdown

Summary

Redesigns the Awesome GitHub Copilot website UX with a modern, cohesive dark-tech language while preserving IA, routes, and copy voice.

Note

This PR stacks on #2180 (WCAG a11y remediation). Until #2180 merges into main, this PR's diff also shows those two a11y commits. Once #2180 lands, this collapses to the single UX commit. The UX work is built on top of the a11y base, so it merges cleanly.

What changed

Header & theme

  • Replaced the hero "View the Awesome Copilot repository on GitHub" text link with a far-right GitHub mark in the top nav.
  • Converted the 3-state theme pill into a single cycling icon toggle; the a11y label reflects the active state.
  • Fixed mobile nav cramping and title clipping.

Landing

  • Recomposed the hero and category cards; fixed the mobile card-count overlap and added the missing category accent bar.

Listing pages (agents, instructions, skills, hooks, workflows, plugins, tools, extensions)

  • Added a shared resource-card renderer (resource-card.ts) and a generic listing controller (listing-controller.ts) so every page uses one card system and one real, always-visible filter bar (search + sort + facet chips) in place of the broken <details> toggle.
  • Gave each page a purpose-built identity: category accent, type icon, and per-type facts (model/tools for agents, author/keywords with icon thumbnails for extensions, features for tools, and so on).
  • Headings now use the landing category accent colors.

Verification

  • astro build passes (38 pages).
  • Accessibility audit (npm run a11y) passes: 12 routes x 2 themes, 0 critical/serious violations.
  • Manually checked desktop + mobile, dark + light across all listing pages, landing, learning-hub, and contributors.

Rev notes

  • No route, slug, or nav-label changes. Social-card invariants and editLink untouched.

IEvangelist and others added 3 commits July 1, 2026 10:23
@IEvangelist
fix(website): remediate WCAG accessibility issues and add axe regress…
33937ea 
…ion guardrail

Fixes accessibility violations found by an axe-core sweep of every website
page in both light and dark themes:

- aria-allowed-role (WCAG 1.3.1, 4.1.2): the shared resource card rendered
  an <article> with role="listitem", which is not an allowed role for that
  element. Switched the wrapper to a <div role="listitem"> so the listitem
  role is valid (affected every card, e.g. #arcade-canvas on /extensions/).
- aria-required-children (WCAG 1.3.1): removed role="list" from the tools,
  contributors, and cookbook containers whose children are not list items.
- nested-interactive (WCAG 4.1.2): removed tabIndex=0 from extension cards
  and rendered the author as a non-interactive span so no interactive
  control is nested inside another (the author link remains in the modal).
- color-contrast (WCAG 1.4.3): gave .btn-primary explicit white text with an
  AA-compliant hover (#7326d6), and bumped the dark-theme secondary text gray
  (--sl-color-gray-3) to #84849c (5.32:1) so ToC / meta / footer text passes.

Adds a checked-in regression guardrail:

- website/scripts/a11y-audit.mjs runs axe-core over all routes in both themes
  against the production build and fails on critical/serious violations only
  (moderate/minor are reported but non-blocking). Transitions/animations are
  disabled before sampling so axe measures settled, steady-state colors
  instead of mid-theme-transition frames.
- Adds npm scripts (website:a11y at the root, a11y in website/) and README
  docs. The matching Build Website CI step is proposed in the PR description
  (omitted from this commit because the authoring token lacks workflow scope).

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@IEvangelist
fix(website): harden a11y audit per PR review
f1da81d 
- Fail fast when a route navigation returns a non-2xx response, so the
  guardrail can't silently pass against a broken/missing route (page.goto
  resolves even for 4xx/5xx).
- Launch the Astro preview server via `node <astro-bin>` instead of
  `spawn(..., { shell: true })`. Removing the shell layer keeps signal
  delivery / detached-PGID shutdown predictable; resolving Astro's bin and
  running it with process.execPath also avoids the EINVAL that modern Node
  raises when spawning the npx.cmd shim without a shell on Windows.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@IEvangelist
feat(website): redesign UX across landing and all listing pages
26ed8fa 
Reimagine the site with a modern, cohesive dark-tech language while
preserving IA, routes, and copy voice.

Header & theme
- Replace the hero "View the repository on GitHub" text link with a
  far-right GitHub mark in the top nav.
- Convert the 3-state theme pill into a single cycling icon toggle with
  an a11y label that reflects the active state.
- Fix mobile nav cramping and title clipping.

Landing
- Recompose the hero and category cards; fix the mobile count overlap
  and add the missing category accent bar.

Listing pages (agents, instructions, skills, hooks, workflows, plugins,
tools, extensions)
- Introduce a shared resource-card renderer (resource-card.ts) and a
  generic listing controller (listing-controller.ts) so every page uses
  one card system and one real, always-visible filter bar (search +
  sort + facet chips) instead of the broken <details> toggle.
- Give each page a purpose-built identity: category accent, type icon,
  and per-type facts (model/tools for agents, author/keywords for
  extensions with icon thumbnails, features for tools, etc.).
- Headings now use the landing category accent colors.

Verified: astro build passes; axe a11y audit passes (12 routes x 2
themes, 0 critical/serious); desktop + mobile, dark + light checked.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@github-actions github-actions Bot added new-submission PR adds at least one new contribution website-update PR touches website content or code labels Jul 2, 2026
@github-actions

github-actions Bot commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

🔴 Contributor Reputation Check: HIGH risk

Check Risk
Profile HIGH
Credential audit NONE

Maintainers: please review this contributor before merging.
See the workflow run for full details.
Automated check powered by AGT.

@github-actions github-actions Bot added the needs-review:HIGH Contributor reputation check flagged HIGH risk label Jul 2, 2026
@IEvangelist IEvangelist closed this Jul 2, 2026
@IEvangelist IEvangelist deleted the dapine/website-ux-redesign branch July 2, 2026 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aaronpowell aaronpowell Awaiting requested review from aaronpowell aaronpowell will be requested when the pull request is marked ready for review aaronpowell is a code owner
Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

Assignees

No one assigned

Labels

needs-review:HIGH Contributor reputation check flagged HIGH risk new-submission PR adds at least one new contribution website-update PR touches website content or code

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@IEvangelist