mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-21 02:45:12 +00:00
94a395dbe0
Phase 1 - Screen Reader Critical: - Add aria-label to main navigation - Add accessible names to icon-only buttons (GitHub, theme toggle, close) - Add aria-hidden to decorative SVGs and emoji icons - Add role=dialog, aria-modal, aria-labelledby to modal - Add skip link with visible focus state Phase 2 - Keyboard Navigation: - Implement focus trap in modal (Tab/Shift+Tab cycles) - Return focus to trigger element on modal close - Replace outline:none with visible focus rings - Add keyboard navigation to install dropdown (arrows, escape) - Add aria-expanded to dropdown toggles Phase 3 - Dynamic Content: - Add aria-live=polite to results counts and loading states - Add role=listbox to search results - Add role=list to resource lists - Add role=menu/menuitem to dropdown menus Phase 4 - Forms & Labels: - Add .sr-only utility class for screen reader text - Add visually hidden labels to all search inputs - Add aria-label to filter dropdowns Files modified: - BaseLayout.astro, Modal.astro (ARIA attributes) - modal.ts (focus trap, keyboard navigation) - global.css (sr-only, skip-link, focus styles) - All page files (labels, live regions, roles)
121 lines
5.0 KiB
Plaintext
121 lines
5.0 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import Modal from '../components/Modal.astro';
|
|
|
|
const base = import.meta.env.BASE_URL;
|
|
---
|
|
|
|
<BaseLayout title="Home" activeNav="">
|
|
<main id="main-content">
|
|
<!-- Hero Section -->
|
|
<section class="hero" aria-labelledby="hero-heading">
|
|
<div class="container">
|
|
<h1 id="hero-heading">Awesome GitHub Copilot</h1>
|
|
<p class="hero-subtitle">Community-contributed instructions, prompts, agents, 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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quick Links -->
|
|
<section class="quick-links" aria-labelledby="quick-links-heading">
|
|
<h2 id="quick-links-heading" class="sr-only">Browse Resources</h2>
|
|
<div class="container">
|
|
<div class="cards-grid">
|
|
<a href={`${base}agents/`} class="card card-with-count" id="card-agents">
|
|
<div class="card-icon" aria-hidden="true">🤖</div>
|
|
<div class="card-content">
|
|
<h3>Agents</h3>
|
|
<p>Custom agents for specialized Copilot experiences</p>
|
|
</div>
|
|
<div class="card-count" data-count="agents" aria-label="Agent count">-</div>
|
|
</a>
|
|
<a href={`${base}prompts/`} class="card card-with-count" id="card-prompts">
|
|
<div class="card-icon" aria-hidden="true">🎯</div>
|
|
<div class="card-content">
|
|
<h3>Prompts</h3>
|
|
<p>Ready-to-use prompt templates for development tasks</p>
|
|
</div>
|
|
<div class="card-count" data-count="prompts" aria-label="Prompt count">-</div>
|
|
</a>
|
|
<a href={`${base}instructions/`} class="card card-with-count" id="card-instructions">
|
|
<div class="card-icon" aria-hidden="true">📋</div>
|
|
<div class="card-content">
|
|
<h3>Instructions</h3>
|
|
<p>Coding standards and best practices for Copilot</p>
|
|
</div>
|
|
<div class="card-count" data-count="instructions" aria-label="Instruction count">-</div>
|
|
</a>
|
|
<a href={`${base}skills/`} class="card card-with-count" id="card-skills">
|
|
<div class="card-icon" aria-hidden="true">⚡</div>
|
|
<div class="card-content">
|
|
<h3>Skills</h3>
|
|
<p>Self-contained folders with instructions and resources</p>
|
|
</div>
|
|
<div class="card-count" data-count="skills" aria-label="Skill count">-</div>
|
|
</a>
|
|
<a href={`${base}collections/`} class="card card-with-count" id="card-collections">
|
|
<div class="card-icon" aria-hidden="true">📦</div>
|
|
<div class="card-content">
|
|
<h3>Collections</h3>
|
|
<p>Curated collections organized by themes</p>
|
|
</div>
|
|
<div class="card-count" data-count="collections" aria-label="Collection count">-</div>
|
|
</a>
|
|
<a href={`${base}tools/`} class="card card-with-count" id="card-tools">
|
|
<div class="card-icon" aria-hidden="true">🔧</div>
|
|
<div class="card-content">
|
|
<h3>Tools</h3>
|
|
<p>MCP servers and developer tools</p>
|
|
</div>
|
|
<div class="card-count" data-count="tools" aria-label="Tool count">-</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Collections -->
|
|
<section class="featured" aria-labelledby="featured-heading">
|
|
<div class="container">
|
|
<h2 id="featured-heading">Featured Collections</h2>
|
|
<div id="featured-collections" class="cards-grid" aria-live="polite">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Getting Started -->
|
|
<section class="getting-started" aria-labelledby="getting-started-heading">
|
|
<div class="container">
|
|
<h2 id="getting-started-heading">Getting Started</h2>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-number" aria-hidden="true">1</div>
|
|
<h3>Browse</h3>
|
|
<p>Explore agents, prompts, instructions, and skills</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number" aria-hidden="true">2</div>
|
|
<h3>Preview</h3>
|
|
<p>Click any item to view its full content</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number" aria-hidden="true">3</div>
|
|
<h3>Install</h3>
|
|
<p>One-click install to VS Code or copy to clipboard</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Modal />
|
|
|
|
<script>
|
|
import '../scripts/pages/index';
|
|
</script>
|
|
</BaseLayout>
|