feat(website): add comprehensive accessibility improvements

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)
This commit is contained in:
Aaron Powell
2026-02-02 11:52:31 +11:00
parent f99c99a5d4
commit 94a395dbe0
13 changed files with 272 additions and 92 deletions

View File

@@ -5,7 +5,7 @@ const base = import.meta.env.BASE_URL;
---
<BaseLayout title="Samples" description="Code samples and examples for building with GitHub Copilot" activeNav="samples">
<main>
<main id="main-content">
<div class="page-header">
<div class="container">
<h1>📚 Samples</h1>
@@ -16,7 +16,7 @@ const base = import.meta.env.BASE_URL;
<div class="page-content">
<div class="container">
<div class="coming-soon">
<div class="coming-soon-icon">🚧</div>
<div class="coming-soon-icon" aria-hidden="true">🚧</div>
<h2>Coming Soon</h2>
<p>We're migrating code samples from the <a href="https://github.com/github/copilot-sdk/tree/main/cookbook" target="_blank" rel="noopener">Copilot SDK Cookbook</a> to this repository.</p>
<p>Check back soon for examples including:</p>