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>

website/src/pages/agents.astro

@@ -11,7 +11,7 @@ const initialItems = sortAgents(agentsData.items, 'title');
 ---
 
 <StarlightPage frontmatter={{ title: 'Custom Agents', description: 'Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains', template: 'splash', prev: false, next: false, editUrl: false }}>
-  <main id="main-content">
+  <div id="main-content">
     <PageHeader title="🤖 Custom Agents" description="Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains" />
 
     <div class="page-content">
@@ -54,7 +54,7 @@ const initialItems = sortAgents(agentsData.items, 'title');
         <ContributeCTA resourceType="agents" />
       </div>
     </div>
-  </main>
+  </div>
 
   <Modal />
   <EmbeddedPageData filename="agents.json" data={agentsData} />

website/src/pages/contributors.astro

@@ -4,7 +4,7 @@ import PageHeader from '../components/PageHeader.astro';
 ---
 
 <StarlightPage frontmatter={{ title: 'Contributors', description: 'The wonderful people who have contributed to Awesome GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
-  <main id="main-content">
+  <div id="main-content">
     <PageHeader title="🌟 Contributors" description="The wonderful people who have contributed to Awesome GitHub Copilot" />
 
     <div class="page-content">
@@ -281,7 +281,7 @@ import PageHeader from '../components/PageHeader.astro';
         </div>
       </div>
     </div>
-  </main>
+  </div>
 
 
   <style>

website/src/pages/hooks.astro

@@ -11,7 +11,7 @@ const initialItems = sortHooks(hooksData.items, 'title');
 ---
 
 <StarlightPage frontmatter={{ title: 'Hooks', description: 'Automated workflows triggered by Copilot coding agent events', template: 'splash', prev: false, next: false, editUrl: false }}>
-  <main id="main-content">
+  <div id="main-content">
     <PageHeader title="🪝 Hooks" description="Automated workflows triggered by Copilot coding agent events" />
 
     <div class="page-content">
@@ -47,7 +47,7 @@ const initialItems = sortHooks(hooksData.items, 'title');
         <ContributeCTA resourceType="hooks" />
       </div>
     </div>
-  </main>
+  </div>
 
   <Modal />
 

website/src/pages/index.astro

@@ -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 />
 

website/src/pages/instructions.astro

@@ -11,7 +11,7 @@ const initialItems = sortInstructions(instructionsData.items, 'title');
 ---
 
 <StarlightPage frontmatter={{ title: 'Instructions', description: 'Coding standards and best practices for GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
-  <main id="main-content">
+  <div id="main-content">
     <PageHeader title="📋 Instructions" description="Coding standards and best practices for GitHub Copilot" />
 
     <div class="page-content">
@@ -43,7 +43,7 @@ const initialItems = sortInstructions(instructionsData.items, 'title');
         <ContributeCTA resourceType="instructions" />
       </div>
     </div>
-  </main>
+  </div>
 
   <Modal />
   <EmbeddedPageData filename="instructions.json" data={instructionsData} />

website/src/pages/plugins.astro

@@ -11,7 +11,7 @@ const initialItems = pluginsData.items;
 ---
 
 <StarlightPage frontmatter={{ title: 'Plugins', description: 'Curated plugins of agents, hooks, and skills for specific workflows', template: 'splash', prev: false, next: false, editUrl: false }}>
-  <main id="main-content">
+  <div id="main-content">
     <PageHeader title="🔌 Plugins" description="Curated plugins of agents, hooks, and skills for specific workflows" />
 
     <div class="page-content">
@@ -45,7 +45,7 @@ const initialItems = pluginsData.items;
         <ContributeCTA resourceType="plugins" />
       </div>
     </div>
-  </main>
+  </div>
 
   <Modal />
   <EmbeddedPageData filename="plugins.json" data={pluginsData} />

website/src/pages/skills.astro

@@ -11,7 +11,7 @@ const initialItems = sortSkills(skillsData.items, 'title');
 ---
 
 <StarlightPage frontmatter={{ title: 'Skills', description: 'Self-contained agent skills with instructions and bundled resources', template: 'splash', prev: false, next: false, editUrl: false }}>
-  <main id="main-content">
+  <div id="main-content">
     <PageHeader title="⚡ Skills" description="Self-contained agent skills with instructions and bundled resources" />
 
     <div class="page-content">
@@ -49,7 +49,7 @@ const initialItems = sortSkills(skillsData.items, 'title');
         <ContributeCTA resourceType="skills" />
       </div>
     </div>
-  </main>
+  </div>
 
   <Modal />
 

website/src/pages/tools.astro

@@ -13,7 +13,7 @@ const initialItems = toolsData.items.map((item) => ({
 ---
 
 <StarlightPage frontmatter={{ title: 'Tools', description: 'MCP servers and developer tools for GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
-  <main id="main-content">
+  <div id="main-content">
     <PageHeader title="🔧 Tools" description="MCP servers and developer tools for GitHub Copilot" />
 
     <div class="page-content">
@@ -55,7 +55,7 @@ const initialItems = toolsData.items.map((item) => ({
         <ContributeCTA resourceType="tools" />
       </div>
     </div>
-  </main>
+  </div>
 
   <EmbeddedPageData filename="tools.json" data={toolsData} />
 

website/src/pages/workflows.astro

@@ -11,7 +11,7 @@ const initialItems = sortWorkflows(workflowsData.items, 'title');
 ---
 
 <StarlightPage frontmatter={{ title: 'Agentic Workflows', description: 'AI-powered repository automations that run coding agents in GitHub Actions', template: 'splash', prev: false, next: false, editUrl: false }}>
-  <main id="main-content">
+  <div id="main-content">
     <PageHeader title="⚡ Agentic Workflows" description="">
       AI-powered repository automations that run coding agents in <a href="https://gh.io/gh-aw" target="_blank" rel="noopener">GitHub Actions</a>
     </PageHeader>
@@ -45,7 +45,7 @@ const initialItems = sortWorkflows(workflowsData.items, 'title');
         <ContributeCTA resourceType="workflows" />
       </div>
     </div>
-  </main>
+  </div>
 
   <Modal />
   <EmbeddedPageData filename="workflows.json" data={workflowsData} />

website/src/scripts/pages/agents-render.ts

@@ -61,7 +61,8 @@ export function renderAgentsHtml(
           : escapeHtml(item.title);
 
       return `
-        <div class="resource-item" data-path="${escapeHtml(item.path)}">
+        <article class="resource-item" data-path="${escapeHtml(item.path)}" role="listitem">
+          <button type="button" class="resource-preview">
             <div class="resource-info">
               <div class="resource-title">${titleHtml}</div>
               <div class="resource-description">${escapeHtml(
@@ -99,6 +100,7 @@ export function renderAgentsHtml(
                 ${getLastUpdatedHtml(item.lastUpdated)}
               </div>
             </div>
+          </button>
           <div class="resource-actions">
             ${getInstallDropdownHtml(resourceType, item.path, true)}
             ${getActionButtonsHtml(item.path, true)}
@@ -108,7 +110,7 @@ export function renderAgentsHtml(
               GitHub
             </a>
           </div>
-        </div>
+        </article>
       `;
     })
     .join("");

website/src/scripts/pages/hooks-render.ts

@@ -59,9 +59,10 @@ export function renderHooksHtml(
           : escapeHtml(item.title);
 
       return `
-        <div class="resource-item" data-path="${escapeHtml(
+        <article class="resource-item" data-path="${escapeHtml(
           item.readmeFile
-        )}" data-hook-id="${escapeHtml(item.id)}">
+        )}" data-hook-id="${escapeHtml(item.id)}" role="listitem">
+          <button type="button" class="resource-preview">
             <div class="resource-info">
               <div class="resource-title">${titleHtml}</div>
               <div class="resource-description">${escapeHtml(
@@ -94,6 +95,7 @@ export function renderHooksHtml(
                 ${getLastUpdatedHtml(item.lastUpdated)}
               </div>
             </div>
+          </button>
           <div class="resource-actions">
             <button class="btn btn-primary download-hook-btn" data-hook-id="${escapeHtml(
               item.id
@@ -108,7 +110,7 @@ export function renderHooksHtml(
               item.path
             )}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">GitHub</a>
           </div>
-        </div>
+        </article>
       `;
     })
     .join("");

website/src/scripts/pages/index.ts

@@ -55,43 +55,120 @@ export async function initHomepage(): Promise<void> {
     const resultsDiv = document.getElementById('search-results');
 
     if (searchInput && resultsDiv) {
+      const statusEl = document.getElementById("global-search-status");
+
+      const hideResults = (): void => {
+        resultsDiv.classList.add("hidden");
+      };
+
+      const showResults = (): void => {
+        resultsDiv.classList.remove("hidden");
+      };
+
+      const getResultButtons = (): HTMLButtonElement[] =>
+        Array.from(
+          resultsDiv.querySelectorAll<HTMLButtonElement>(".search-result")
+        );
+
+      const openResult = (resultEl: HTMLElement): void => {
+        const path = resultEl.dataset.path;
+        const type = resultEl.dataset.type;
+        if (path && type) {
+          hideResults();
+          openFileModal(path, type);
+        }
+      };
+
       searchInput.addEventListener('input', debounce(() => {
         const query = searchInput.value.trim();
         if (query.length < 2) {
-          resultsDiv.classList.add('hidden');
+          resultsDiv.innerHTML = '';
+          if (statusEl) {
+            statusEl.textContent = '';
+          }
+          hideResults();
           return;
         }
 
         const results = search.search(query).slice(0, 10);
         if (results.length === 0) {
           resultsDiv.innerHTML = '<div class="search-result-empty">No results found</div>';
+          if (statusEl) {
+            statusEl.textContent = 'No results found.';
+          }
         } else {
           resultsDiv.innerHTML = results.map(item => `
-            <div class="search-result" data-path="${escapeHtml(item.path)}" data-type="${escapeHtml(item.type)}">
+            <button type="button" class="search-result" data-path="${escapeHtml(item.path)}" data-type="${escapeHtml(item.type)}">
               <span class="search-result-type">${getResourceIcon(item.type)}</span>
               <div>
                 <div class="search-result-title">${search.highlight(item.title, query)}</div>
                 <div class="search-result-description">${truncate(item.description, 60)}</div>
               </div>
-            </div>
+            </button>
           `).join('');
 
-          // Add click handlers
-          resultsDiv.querySelectorAll('.search-result').forEach(el => {
+          if (statusEl) {
+            statusEl.textContent = `${results.length} result${results.length === 1 ? '' : 's'} available.`;
+          }
+
+          getResultButtons().forEach((el, index, buttons) => {
             el.addEventListener('click', () => {
-              const path = (el as HTMLElement).dataset.path;
-              const type = (el as HTMLElement).dataset.type;
-              if (path && type) openFileModal(path, type);
+              openResult(el);
+            });
+
+            el.addEventListener("keydown", (event) => {
+              switch (event.key) {
+                case "ArrowDown":
+                  event.preventDefault();
+                  buttons[(index + 1) % buttons.length]?.focus();
+                  break;
+                case "ArrowUp":
+                  event.preventDefault();
+                  if (index === 0) {
+                    searchInput.focus();
+                  } else {
+                    buttons[index - 1]?.focus();
+                  }
+                  break;
+                case "Home":
+                  event.preventDefault();
+                  buttons[0]?.focus();
+                  break;
+                case "End":
+                  event.preventDefault();
+                  buttons[buttons.length - 1]?.focus();
+                  break;
+                case "Escape":
+                  event.preventDefault();
+                  hideResults();
+                  searchInput.focus();
+                  break;
+              }
             });
           });
         }
-        resultsDiv.classList.remove('hidden');
+
+        showResults();
       }, 200));
 
+      searchInput.addEventListener("keydown", (event) => {
+        if (event.key === "ArrowDown") {
+          const firstResult = getResultButtons()[0];
+          if (firstResult) {
+            event.preventDefault();
+            firstResult.focus();
+          }
+        }
+
+        if (event.key === "Escape") {
+          hideResults();
+        }
+      });
+
       // Close results when clicking outside
       document.addEventListener('click', (e) => {
         if (!searchInput.contains(e.target as Node) && !resultsDiv.contains(e.target as Node)) {
-          resultsDiv.classList.add('hidden');
+          hideResults();
         }
       });
     }

website/src/scripts/pages/instructions-render.ts

@@ -61,7 +61,8 @@ export function renderInstructionsHtml(
           : escapeHtml(item.title);
 
       return `
-        <div class="resource-item" data-path="${escapeHtml(item.path)}">
+        <article class="resource-item" data-path="${escapeHtml(item.path)}" role="listitem">
+          <button type="button" class="resource-preview">
             <div class="resource-info">
               <div class="resource-title">${titleHtml}</div>
               <div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
@@ -72,6 +73,7 @@ export function renderInstructionsHtml(
                 ${getLastUpdatedHtml(item.lastUpdated)}
               </div>
             </div>
+          </button>
           <div class="resource-actions">
             ${getInstallDropdownHtml('instructions', item.path, true)}
             ${getActionButtonsHtml(item.path, true)}
@@ -79,7 +81,7 @@ export function renderInstructionsHtml(
               GitHub
             </a>
           </div>
-        </div>
+        </article>
       `;
     })
     .join('');

website/src/scripts/pages/plugins-render.ts

@@ -70,7 +70,8 @@ export function renderPluginsHtml(
           : escapeHtml(item.name);
 
       return `
-        <div class="resource-item${isExternal ? ' resource-item-external' : ''}" data-path="${escapeHtml(item.path)}">
+        <article class="resource-item${isExternal ? ' resource-item-external' : ''}" data-path="${escapeHtml(item.path)}" role="listitem">
+          <button type="button" class="resource-preview">
             <div class="resource-info">
               <div class="resource-title">${titleHtml}</div>
               <div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
@@ -81,10 +82,11 @@ export function renderPluginsHtml(
                 ${item.tags && item.tags.length > 4 ? `<span class="resource-tag">+${item.tags.length - 4} more</span>` : ''}
               </div>
             </div>
+          </button>
           <div class="resource-actions">
             <a href="${githubHref}" class="btn btn-secondary" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()" title="${isExternal ? 'View repository' : 'View on GitHub'}">${isExternal ? 'Repository' : 'GitHub'}</a>
           </div>
-        </div>
+        </article>
       `;
     })
     .join('');

website/src/scripts/pages/skills-render.ts

@@ -65,9 +65,10 @@ export function renderSkillsHtml(
           : escapeHtml(item.title);
 
       return `
-        <div class="resource-item" data-path="${escapeHtml(
+        <article class="resource-item" data-path="${escapeHtml(
           item.skillFile
-        )}" data-skill-id="${escapeHtml(item.id)}">
+        )}" data-skill-id="${escapeHtml(item.id)}" role="listitem">
+          <button type="button" class="resource-preview">
             <div class="resource-info">
               <div class="resource-title">${titleHtml}</div>
               <div class="resource-description">${escapeHtml(
@@ -90,6 +91,7 @@ export function renderSkillsHtml(
                 ${getLastUpdatedHtml(item.lastUpdated)}
               </div>
             </div>
+          </button>
           <div class="resource-actions">
             <button class="btn btn-primary download-skill-btn" data-skill-id="${escapeHtml(
               item.id
@@ -104,7 +106,7 @@ export function renderSkillsHtml(
               item.path
             )}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">GitHub</a>
           </div>
-        </div>
+        </article>
       `;
     })
     .join("");

website/src/scripts/pages/workflows-render.ts

@@ -56,7 +56,8 @@ export function renderWorkflowsHtml(
           : escapeHtml(item.title);
 
       return `
-        <div class="resource-item" data-path="${escapeHtml(item.path)}">
+        <article class="resource-item" data-path="${escapeHtml(item.path)}" role="listitem">
+          <button type="button" class="resource-preview">
             <div class="resource-info">
               <div class="resource-title">${titleHtml}</div>
               <div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
@@ -65,11 +66,12 @@ export function renderWorkflowsHtml(
                 ${getLastUpdatedHtml(item.lastUpdated)}
               </div>
             </div>
+          </button>
           <div class="resource-actions">
             ${getActionButtonsHtml(item.path)}
             <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">GitHub</a>
           </div>
-        </div>
+        </article>
       `;
     })
     .join('');

website/src/styles/global.css

@@ -275,11 +275,16 @@ body:has(#main-content) {
   display: flex;
   align-items: flex-start;
   gap: 14px;
+  width: 100%;
   padding: 14px 18px;
+  background: transparent;
+  border: 0;
   cursor: pointer;
   border-bottom: 1px solid var(--color-glass-border);
   transition: all var(--transition);
   text-align: left;
+  color: inherit;
+  font: inherit;
 }
 
 .search-result:last-child,
@@ -288,10 +293,16 @@ body:has(#main-content) {
 }
 
 .search-result:hover,
+.search-result:focus-visible,
 .search-result-item:hover {
   background: var(--color-bg-tertiary);
 }
 
+.search-result:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+
 .search-result-type {
   font-size: 20px;
   flex-shrink: 0;
@@ -1464,7 +1475,6 @@ body:has(#main-content) {
   justify-content: space-between;
   gap: 20px;
   transition: all var(--transition);
-  cursor: pointer;
   position: relative;
 }
 
@@ -1481,21 +1491,45 @@ body:has(#main-content) {
   transition: opacity var(--transition), left var(--transition);
 }
 
-.resource-item:hover {
+.resource-item:hover,
+.resource-item:focus-within {
   background: var(--color-card-hover);
   transform: translateX(4px);
   box-shadow: var(--shadow);
   border-radius: 0px var(--border-radius-lg) var(--border-radius-lg) 0px;
 }
 
-.resource-item:hover::before {
+.resource-item:hover::before,
+.resource-item:focus-within::before {
   opacity: 1;
   left: -4px;
 }
 
+.resource-preview {
+  flex: 1;
+  min-width: 0;
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.resource-preview:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 4px;
+  border-radius: var(--border-radius);
+}
+
 .resource-info {
   flex: 1;
   min-width: 0;
+  width: 100%;
 }
 
 .resource-title {