mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-18 15:15:15 +00:00
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:
@@ -7,7 +7,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
description="MCP servers and developer tools for GitHub Copilot"
|
||||
activeNav="tools"
|
||||
>
|
||||
<main>
|
||||
<main id="main-content">
|
||||
<div class="page-header">
|
||||
<div class="container">
|
||||
<h1>🔧 Tools</h1>
|
||||
@@ -19,6 +19,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
<div class="container">
|
||||
<div class="search-section">
|
||||
<div class="search-bar">
|
||||
<label for="search-input" class="sr-only">Search tools</label>
|
||||
<input
|
||||
type="text"
|
||||
id="search-input"
|
||||
@@ -27,17 +28,18 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
/>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<select id="filter-category" class="filter-select">
|
||||
<label for="filter-category" class="sr-only">Filter by category</label>
|
||||
<select id="filter-category" class="filter-select" aria-label="Filter by category">
|
||||
<option value="">All Categories</option>
|
||||
</select>
|
||||
<button id="clear-filters" class="btn btn-secondary btn-small"
|
||||
>Clear</button
|
||||
>
|
||||
</div>
|
||||
<div id="results-count" class="results-count"></div>
|
||||
<div id="results-count" class="results-count" aria-live="polite"></div>
|
||||
</div>
|
||||
|
||||
<div id="tools-list"></div>
|
||||
<div id="tools-list" role="list"></div>
|
||||
|
||||
<div class="coming-soon">
|
||||
<h2>More Tools Coming Soon</h2>
|
||||
|
||||
Reference in New Issue
Block a user