Improve website accessibility (#979)

* Improve website accessibility

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Refine homepage search semantics

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Aaron Powell
2026-03-12 14:25:18 +11:00
committed by GitHub
parent eb7d223446
commit 423be2fc70
17 changed files with 293 additions and 160 deletions

View File

@@ -11,7 +11,7 @@ const initialItems = sortAgents(agentsData.items, 'title');
---
<StarlightPage frontmatter={{ title: 'Custom Agents', description: 'Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains', template: 'splash', prev: false, next: false, editUrl: false }}>
<main id="main-content">
<div id="main-content">
<PageHeader title="🤖 Custom Agents" description="Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains" />
<div class="page-content">
@@ -54,7 +54,7 @@ const initialItems = sortAgents(agentsData.items, 'title');
<ContributeCTA resourceType="agents" />
</div>
</div>
</main>
</div>
<Modal />
<EmbeddedPageData filename="agents.json" data={agentsData} />

View File

@@ -4,7 +4,7 @@ import PageHeader from '../components/PageHeader.astro';
---
<StarlightPage frontmatter={{ title: 'Contributors', description: 'The wonderful people who have contributed to Awesome GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
<main id="main-content">
<div id="main-content">
<PageHeader title="🌟 Contributors" description="The wonderful people who have contributed to Awesome GitHub Copilot" />
<div class="page-content">
@@ -281,7 +281,7 @@ import PageHeader from '../components/PageHeader.astro';
</div>
</div>
</div>
</main>
</div>
<style>

View File

@@ -11,7 +11,7 @@ const initialItems = sortHooks(hooksData.items, 'title');
---
<StarlightPage frontmatter={{ title: 'Hooks', description: 'Automated workflows triggered by Copilot coding agent events', template: 'splash', prev: false, next: false, editUrl: false }}>
<main id="main-content">
<div id="main-content">
<PageHeader title="🪝 Hooks" description="Automated workflows triggered by Copilot coding agent events" />
<div class="page-content">
@@ -47,7 +47,7 @@ const initialItems = sortHooks(hooksData.items, 'title');
<ContributeCTA resourceType="hooks" />
</div>
</div>
</main>
</div>
<Modal />

View File

@@ -6,7 +6,7 @@ const base = import.meta.env.BASE_URL;
---
<StarlightPage frontmatter={{ title: 'Awesome GitHub Copilot', template: 'splash', pagefind: false, prev: false, next: false, editUrl: false }} hasSidebar={false}>
<main id="main-content">
<div id="main-content">
<!-- Hero Section -->
<section class="hero" aria-labelledby="hero-heading">
<div class="container">
@@ -14,8 +14,18 @@ const base = import.meta.env.BASE_URL;
<p class="hero-subtitle">Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience</p>
<div class="hero-search">
<label for="global-search" class="sr-only">Search all resources</label>
<input type="text" id="global-search" placeholder="Search all resources..." autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="search-results">
<div id="search-results" class="search-results hidden" role="listbox" aria-label="Search results"></div>
<p id="global-search-help" class="sr-only">
Type at least two characters to show matching resources, then press the Down Arrow key to move into the results.
</p>
<p id="global-search-status" class="sr-only" aria-live="polite"></p>
<input
type="text"
id="global-search"
placeholder="Search all resources..."
autocomplete="off"
aria-describedby="global-search-help global-search-status"
>
<div id="search-results" class="search-results hidden" aria-label="Search results"></div>
</div>
</div>
</section>
@@ -92,7 +102,7 @@ const base = import.meta.env.BASE_URL;
</div>
</section>
</main>
</div>
<Modal />

View File

@@ -11,7 +11,7 @@ const initialItems = sortInstructions(instructionsData.items, 'title');
---
<StarlightPage frontmatter={{ title: 'Instructions', description: 'Coding standards and best practices for GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
<main id="main-content">
<div id="main-content">
<PageHeader title="📋 Instructions" description="Coding standards and best practices for GitHub Copilot" />
<div class="page-content">
@@ -43,7 +43,7 @@ const initialItems = sortInstructions(instructionsData.items, 'title');
<ContributeCTA resourceType="instructions" />
</div>
</div>
</main>
</div>
<Modal />
<EmbeddedPageData filename="instructions.json" data={instructionsData} />

View File

@@ -11,7 +11,7 @@ const initialItems = pluginsData.items;
---
<StarlightPage frontmatter={{ title: 'Plugins', description: 'Curated plugins of agents, hooks, and skills for specific workflows', template: 'splash', prev: false, next: false, editUrl: false }}>
<main id="main-content">
<div id="main-content">
<PageHeader title="🔌 Plugins" description="Curated plugins of agents, hooks, and skills for specific workflows" />
<div class="page-content">
@@ -45,7 +45,7 @@ const initialItems = pluginsData.items;
<ContributeCTA resourceType="plugins" />
</div>
</div>
</main>
</div>
<Modal />
<EmbeddedPageData filename="plugins.json" data={pluginsData} />

View File

@@ -11,7 +11,7 @@ const initialItems = sortSkills(skillsData.items, 'title');
---
<StarlightPage frontmatter={{ title: 'Skills', description: 'Self-contained agent skills with instructions and bundled resources', template: 'splash', prev: false, next: false, editUrl: false }}>
<main id="main-content">
<div id="main-content">
<PageHeader title="⚡ Skills" description="Self-contained agent skills with instructions and bundled resources" />
<div class="page-content">
@@ -49,7 +49,7 @@ const initialItems = sortSkills(skillsData.items, 'title');
<ContributeCTA resourceType="skills" />
</div>
</div>
</main>
</div>
<Modal />

View File

@@ -13,7 +13,7 @@ const initialItems = toolsData.items.map((item) => ({
---
<StarlightPage frontmatter={{ title: 'Tools', description: 'MCP servers and developer tools for GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
<main id="main-content">
<div id="main-content">
<PageHeader title="🔧 Tools" description="MCP servers and developer tools for GitHub Copilot" />
<div class="page-content">
@@ -55,7 +55,7 @@ const initialItems = toolsData.items.map((item) => ({
<ContributeCTA resourceType="tools" />
</div>
</div>
</main>
</div>
<EmbeddedPageData filename="tools.json" data={toolsData} />

View File

@@ -11,7 +11,7 @@ const initialItems = sortWorkflows(workflowsData.items, 'title');
---
<StarlightPage frontmatter={{ title: 'Agentic Workflows', description: 'AI-powered repository automations that run coding agents in GitHub Actions', template: 'splash', prev: false, next: false, editUrl: false }}>
<main id="main-content">
<div id="main-content">
<PageHeader title="⚡ Agentic Workflows" description="">
AI-powered repository automations that run coding agents in <a href="https://gh.io/gh-aw" target="_blank" rel="noopener">GitHub Actions</a>
</PageHeader>
@@ -45,7 +45,7 @@ const initialItems = sortWorkflows(workflowsData.items, 'title');
<ContributeCTA resourceType="workflows" />
</div>
</div>
</main>
</div>
<Modal />
<EmbeddedPageData filename="workflows.json" data={workflowsData} />