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
+14 -4
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 />