mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 02:15: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)
55 lines
1.9 KiB
Plaintext
55 lines
1.9 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import Modal from '../components/Modal.astro';
|
|
---
|
|
|
|
<BaseLayout title="Agents" description="Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains" activeNav="agents">
|
|
<main id="main-content">
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<h1>🤖 Custom Agents</h1>
|
|
<p>Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-content">
|
|
<div class="container">
|
|
<div class="search-bar">
|
|
<label for="search-input" class="sr-only">Search agents</label>
|
|
<input type="text" id="search-input" placeholder="Search agents..." autocomplete="off">
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="filters-bar" id="filters-bar">
|
|
<div class="filter-group">
|
|
<label for="filter-model">Model:</label>
|
|
<select id="filter-model" multiple aria-label="Filter by model"></select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="filter-tool">Tool:</label>
|
|
<select id="filter-tool" multiple aria-label="Filter by tool"></select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="filter-handoffs">
|
|
Has Handoffs
|
|
</label>
|
|
</div>
|
|
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
|
|
</div>
|
|
|
|
<div class="results-count" id="results-count" aria-live="polite"></div>
|
|
<div class="resource-list" id="resource-list" role="list">
|
|
<div class="loading" aria-live="polite">Loading agents...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Modal />
|
|
|
|
<script>
|
|
import '../scripts/pages/agents';
|
|
</script>
|
|
</BaseLayout>
|