* fix(website): remediate WCAG accessibility issues and add axe regression 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>
* fix(website): harden a11y audit per PR review
- 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>
---------
Co-authored-by: David Pine <7679720+IEvangelist@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
* Add canvas schema and extension submission checks
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
* fix: use namespace import for js-yaml
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
* Fix contributors page build markup
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
* Address PR feedback on canvas schema validation
- Add ajv-cli@5 as a pinned devDependency; install via npm ci in CI instead of npx --yes
- Fix screenshot path regex to prevent .. traversal segments
- Validate canvas.schema.json is parseable JSON even on schema-only PRs
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
* Harden canvas extension workflow against injection attacks
Switch from newline to null-terminated git diff output (git diff -z) so filenames
containing newlines are read atomically, matching the existing skill-check.yml pattern.
Add an allowlist regex guard on the extracted extension directory name immediately after
it is parsed from git diff output. Any name not matching ^[a-z0-9][a-z0-9-]*$ (e.g.
names containing dollar signs, parentheses, spaces, or other shell metacharacters) is
silently skipped before being used anywhere in the script.
Add a matching allowlist guard on each screenshot path extracted from canvas.json before
the file-existence check, so a crafted manifest cannot supply a path with shell
metacharacters or traversal segments even after the schema check passes.
Follows the same defence-in-depth pattern introduced after the injection PoCs in #1236
and #1240.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
* Potential fix for pull request finding
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
* Replace ajv-cli with in-repo schema validator
- Remove ajv-cli to avoid vulnerable/deprecated transitive dependencies
- Add eng/validate-json-schema.mjs using ajv + ajv-formats
- Update validate-canvas-extensions workflow to use local script
- Use npm ci --ignore-scripts in PR validation job
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
* Potential fix for pull request finding
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
* Potential fix for pull request finding
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
* feat(ui): replace emoji icons with SVG icon system
Replace all emoji icons with a consistent SVG icon system to improve:
- Visual consistency across platforms
- Design token control and theming
- Professional appearance
Changes:
- Add new Icon.astro component with 16 custom SVG icons
- Update index.astro to use SVG icons in resource cards
- Update index.ts to render SVG icons in search results
- Update utils.ts to return icon names instead of emojis
- Update global.css with proper SVG icon styling
- Remove emoji from Footer component
Icons added: robot, document, lightning, hook, workflow, plug, wrench, book,
plus action icons: close, copy, download, share, external, plus, search, chevron-down
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* feat(ui): enhance hero section, add animations and mobile responsiveness
Phase 2 & 3 UI/UX improvements:
Hero Section Enhancements:
- Add gradient text effect for title (purple to orange gradient)
- Add animated floating particles in hero background
- Increase hero padding for better visual impact
Card Category Colors:
- Add category-specific accent colors (AI, docs, power, automation, etc.)
- Each category has unique glow effect on hover
- Category colors: purple (AI), orange (docs), red (power), etc.
Entrance Animations:
- Add staggered fade-in animation for cards (50ms delay each)
- Cards animate in with translateY + opacity
- Add slide-down animation for search results
Mobile Responsiveness:
- Responsive grid: 4 cols → 2 cols → 1 col
- Adjust font sizes for mobile screens
- Add safe-area-inset support for notched devices
- Ensure touch targets ≥44px
Accessibility:
- Add prefers-reduced-motion support
- Disable animations for users who prefer reduced motion
- Smooth scroll with fallback
Additional Improvements:
- Add arrow indicator on card hover
- Add loading animation for count numbers
- Enhanced scrollbar styling
- Print styles for better printing
Co-Authored-By: Claude <noreply@anthropic.com>
* feat(ui): add theme toggle, enhanced search, and back to top button
Theme Toggle:
- Create ThemeToggle.astro component with sun/moon icons
- Add theme initialization in Head.astro to prevent flash
- Store theme preference in localStorage
- Keyboard shortcut: Cmd/Ctrl + Shift + L
- Smooth icon transition animation
Back to Top Button:
- Create BackToTop.astro component
- Appears after scrolling 400px
- Smooth scroll to top on click
- Fixed position bottom-right
- Respects reduced motion preference
Enhanced Search:
- Recent searches functionality with localStorage
- Show recent searches on focus when empty
- Remove individual items or clear all
- Enhanced empty state with icon and hint
- Cmd/Ctrl + K keyboard shortcut to focus search
- Add search to recent when getting results
CSS Enhancements:
- Theme toggle container styles
- Recent searches section styling
- Search empty state with icon
- Search loading spinner
- Keyboard shortcut hint styles
- Print styles for new components
Co-Authored-By: Claude <noreply@anthropic.com>
* fix(ui): resolve header and theme toggle issues
- Add Copilot logo to header via Starlight config with automatic theme switching
- Fix theme toggle slider direction (was reversed)
- Fix theme toggle active icon highlighting (was backwards)
- Change theme toggle from purple circle slider to bold text indicator
- Fix theme toggle slider overflow by adding overflow: hidden
- Remove duplicate banner image from home page
- Clean up conflicting logo CSS rules to prevent duplication
The header now displays: [ Copilot Icon ] Awesome GitHub Copilot [ Search ]
Theme toggle indicators are now visually clear with bold text for selected theme.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
* fix(ui): address feedback on UI/UX improvements
- Remove logo from header per brand guidance (logo config and CSS)
- Fix back-to-top button visibility by moving to body level and using global styles
- Fix modal visibility by adding 'visible' class for CSS animations
- Fix theme toggle applying site-wide by using global styles and proper theme initialization
- Update icons to use GitHub Primer SVG icons with proper fill-based styling
- Fix plugin modal to render SVG icons instead of icon names
- Add theme initialization script to prevent flash of unstyled content
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix: move modal to body level to fix z-index stacking context issue
The modal was nested inside .main-pane which has isolation: isolate,
creating a new stacking context. This caused the modal's z-index
to be evaluated within that context, unable to stack above the header.
This fix moves the modal to be a direct child of body on page load,
allowing it to properly cover the entire viewport including navbar.
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
* Initial plan
* feat: add contributors page to website
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
* feat: add footer with contributors link and fix emoji-only display
- Add custom Starlight Footer component with 'Made with ❤️ by our
amazing contributors' linking to /contributors/
- Filter out contribution types without emoji mappings in the
contributor data generation so only emojis (🎭🎁🧭⌨️🧰) are
shown on the contributors page, not text labels like 'code' or 'doc'
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* feat: use all-contributors HTML output for contributors page
- Restyle all-contributors generated table as a responsive card grid
using CSS grid on tbody with card-styled td cells
- Remove old custom JS search/filter UI and contributors.ts script
- Remove generateContributorsData from data pipeline (no longer needed)
- Keep all-contributors markers for bot regeneration
- Include updated contributor data from .all-contributorsrc
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* fix: CSS fixes for contributors page Starlight compatibility
- Override Starlight table width/overflow to prevent clipping
- Force td width: 100% to counteract HTML width="14.28%" attribute
- Set emoji links to display: inline to prevent vertical stacking
- Improve border visibility with lighter gray color
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
Co-authored-by: Aaron Powell <me@aaron-powell.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Ayan Gupta
Copilot
allcontributors[bot]
David Pine
Aaron Powell
JoeVenner