From 423be2fc70a5db4fa5f69f00759b019f85eb0593 Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Thu, 12 Mar 2026 14:25:18 +1100
Subject: [PATCH] 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                |  4 +-
 website/src/pages/contributors.astro          |  4 +-
 website/src/pages/hooks.astro                 |  4 +-
 website/src/pages/index.astro                 | 18 +++-
 website/src/pages/instructions.astro          |  4 +-
 website/src/pages/plugins.astro               |  4 +-
 website/src/pages/skills.astro                |  4 +-
 website/src/pages/tools.astro                 |  4 +-
 website/src/pages/workflows.astro             |  4 +-
 website/src/scripts/pages/agents-render.ts    | 78 +++++++--------
 website/src/scripts/pages/hooks-render.ts     | 70 ++++++-------
 website/src/scripts/pages/index.ts            | 97 +++++++++++++++++--
 .../src/scripts/pages/instructions-render.ts  | 24 ++---
 website/src/scripts/pages/plugins-render.ts   | 24 ++---
 website/src/scripts/pages/skills-render.ts    | 50 +++++-----
 website/src/scripts/pages/workflows-render.ts | 20 ++--
 website/src/styles/global.css                 | 40 +++++++-
 17 files changed, 293 insertions(+), 160 deletions(-)

diff --git a/website/src/pages/agents.astro b/website/src/pages/agents.astro
index f1ca6f42..df1e0566 100644
--- a/website/src/pages/agents.astro
+++ b/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} />
diff --git a/website/src/pages/contributors.astro b/website/src/pages/contributors.astro
index 38b13b47..3225a690 100644
--- a/website/src/pages/contributors.astro
+++ b/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>
diff --git a/website/src/pages/hooks.astro b/website/src/pages/hooks.astro
index 932dbb21..12b59819 100644
--- a/website/src/pages/hooks.astro
+++ b/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 />
 
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 9b6e37a9..9953141d 100644
--- a/website/src/pages/index.astro
+++ b/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 />
 
diff --git a/website/src/pages/instructions.astro b/website/src/pages/instructions.astro
index 3819e4a4..f7884a90 100644
--- a/website/src/pages/instructions.astro
+++ b/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} />
diff --git a/website/src/pages/plugins.astro b/website/src/pages/plugins.astro
index ba70666e..3c7e3f11 100644
--- a/website/src/pages/plugins.astro
+++ b/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} />
diff --git a/website/src/pages/skills.astro b/website/src/pages/skills.astro
index f08a66c4..943e9442 100644
--- a/website/src/pages/skills.astro
+++ b/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 />
 
diff --git a/website/src/pages/tools.astro b/website/src/pages/tools.astro
index 22ed6602..c9541d8b 100644
--- a/website/src/pages/tools.astro
+++ b/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} />
 
diff --git a/website/src/pages/workflows.astro b/website/src/pages/workflows.astro
index cdf22cbd..f5972f27 100644
--- a/website/src/pages/workflows.astro
+++ b/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} />
diff --git a/website/src/scripts/pages/agents-render.ts b/website/src/scripts/pages/agents-render.ts
index 23b7e82a..273a1d53 100644
--- a/website/src/scripts/pages/agents-render.ts
+++ b/website/src/scripts/pages/agents-render.ts
@@ -61,44 +61,46 @@ export function renderAgentsHtml(
           : escapeHtml(item.title);
 
       return `
-        <div class="resource-item" data-path="${escapeHtml(item.path)}">
-          <div class="resource-info">
-            <div class="resource-title">${titleHtml}</div>
-            <div class="resource-description">${escapeHtml(
-              item.description || "No description"
-            )}</div>
-            <div class="resource-meta">
-              ${
-                item.model
-                  ? `<span class="resource-tag tag-model">${escapeHtml(
-                      item.model
-                    )}</span>`
-                  : ""
-              }
-              ${
-                item.tools
-                  ?.slice(0, 3)
-                  .map(
-                    (tool) =>
-                      `<span class="resource-tag">${escapeHtml(tool)}</span>`
-                  )
-                  .join("") || ""
-              }
-              ${
-                item.tools && item.tools.length > 3
-                  ? `<span class="resource-tag">+${
-                      item.tools.length - 3
-                    } more</span>`
-                  : ""
-              }
-              ${
-                item.hasHandoffs
-                  ? `<span class="resource-tag tag-handoffs">handoffs</span>`
-                  : ""
-              }
-              ${getLastUpdatedHtml(item.lastUpdated)}
+        <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>
+              <div class="resource-meta">
+                ${
+                  item.model
+                    ? `<span class="resource-tag tag-model">${escapeHtml(
+                        item.model
+                      )}</span>`
+                    : ""
+                }
+                ${
+                  item.tools
+                    ?.slice(0, 3)
+                    .map(
+                      (tool) =>
+                        `<span class="resource-tag">${escapeHtml(tool)}</span>`
+                    )
+                    .join("") || ""
+                }
+                ${
+                  item.tools && item.tools.length > 3
+                    ? `<span class="resource-tag">+${
+                        item.tools.length - 3
+                      } more</span>`
+                    : ""
+                }
+                ${
+                  item.hasHandoffs
+                    ? `<span class="resource-tag tag-handoffs">handoffs</span>`
+                    : ""
+                }
+                ${getLastUpdatedHtml(item.lastUpdated)}
+              </div>
             </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("");
diff --git a/website/src/scripts/pages/hooks-render.ts b/website/src/scripts/pages/hooks-render.ts
index 27677949..dcd0cc39 100644
--- a/website/src/scripts/pages/hooks-render.ts
+++ b/website/src/scripts/pages/hooks-render.ts
@@ -59,41 +59,43 @@ 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)}">
-          <div class="resource-info">
-            <div class="resource-title">${titleHtml}</div>
-            <div class="resource-description">${escapeHtml(
-              item.description || "No description"
-            )}</div>
-            <div class="resource-meta">
-              ${item.hooks
-                .map(
-                  (hook) =>
-                    `<span class="resource-tag tag-hook">${escapeHtml(
-                      hook
-                    )}</span>`
-                )
-                .join("")}
-              ${item.tags
-                .map(
-                  (tag) =>
-                    `<span class="resource-tag tag-tag">${escapeHtml(
-                      tag
-                    )}</span>`
-                )
-                .join("")}
-              ${
-                item.assets.length > 0
-                  ? `<span class="resource-tag tag-assets">${
-                      item.assets.length
-                    } asset${item.assets.length === 1 ? "" : "s"}</span>`
-                  : ""
-              }
-              ${getLastUpdatedHtml(item.lastUpdated)}
+        )}" 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(
+                item.description || "No description"
+              )}</div>
+              <div class="resource-meta">
+                ${item.hooks
+                  .map(
+                    (hook) =>
+                      `<span class="resource-tag tag-hook">${escapeHtml(
+                        hook
+                      )}</span>`
+                  )
+                  .join("")}
+                ${item.tags
+                  .map(
+                    (tag) =>
+                      `<span class="resource-tag tag-tag">${escapeHtml(
+                        tag
+                      )}</span>`
+                  )
+                  .join("")}
+                ${
+                  item.assets.length > 0
+                    ? `<span class="resource-tag tag-assets">${
+                        item.assets.length
+                      } asset${item.assets.length === 1 ? "" : "s"}</span>`
+                    : ""
+                }
+                ${getLastUpdatedHtml(item.lastUpdated)}
+              </div>
             </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("");
diff --git a/website/src/scripts/pages/index.ts b/website/src/scripts/pages/index.ts
index bd2979c9..3b517a2a 100644
--- a/website/src/scripts/pages/index.ts
+++ b/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();
         }
       });
     }
diff --git a/website/src/scripts/pages/instructions-render.ts b/website/src/scripts/pages/instructions-render.ts
index 7421fb2c..bf59a0da 100644
--- a/website/src/scripts/pages/instructions-render.ts
+++ b/website/src/scripts/pages/instructions-render.ts
@@ -61,17 +61,19 @@ export function renderInstructionsHtml(
           : escapeHtml(item.title);
 
       return `
-        <div class="resource-item" data-path="${escapeHtml(item.path)}">
-          <div class="resource-info">
-            <div class="resource-title">${titleHtml}</div>
-            <div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
-            <div class="resource-meta">
-              ${applyToText ? `<span class="resource-tag">applies to: ${escapeHtml(applyToText)}</span>` : ''}
-              ${item.extensions?.slice(0, 4).map((extension) => `<span class="resource-tag tag-extension">${escapeHtml(extension)}</span>`).join('') || ''}
-              ${item.extensions && item.extensions.length > 4 ? `<span class="resource-tag">+${item.extensions.length - 4} more</span>` : ''}
-              ${getLastUpdatedHtml(item.lastUpdated)}
+        <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>
+              <div class="resource-meta">
+                ${applyToText ? `<span class="resource-tag">applies to: ${escapeHtml(applyToText)}</span>` : ''}
+                ${item.extensions?.slice(0, 4).map((extension) => `<span class="resource-tag tag-extension">${escapeHtml(extension)}</span>`).join('') || ''}
+                ${item.extensions && item.extensions.length > 4 ? `<span class="resource-tag">+${item.extensions.length - 4} more</span>` : ''}
+                ${getLastUpdatedHtml(item.lastUpdated)}
+              </div>
             </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('');
diff --git a/website/src/scripts/pages/plugins-render.ts b/website/src/scripts/pages/plugins-render.ts
index 1434c280..c7731fce 100644
--- a/website/src/scripts/pages/plugins-render.ts
+++ b/website/src/scripts/pages/plugins-render.ts
@@ -70,21 +70,23 @@ export function renderPluginsHtml(
           : escapeHtml(item.name);
 
       return `
-        <div class="resource-item${isExternal ? ' resource-item-external' : ''}" data-path="${escapeHtml(item.path)}">
-          <div class="resource-info">
-            <div class="resource-title">${titleHtml}</div>
-            <div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
-            <div class="resource-meta">
-              ${metaTag}
-              ${authorTag}
-              ${item.tags?.slice(0, 4).map((tag) => `<span class="resource-tag">${escapeHtml(tag)}</span>`).join('') || ''}
-              ${item.tags && item.tags.length > 4 ? `<span class="resource-tag">+${item.tags.length - 4} more</span>` : ''}
+        <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>
+              <div class="resource-meta">
+                ${metaTag}
+                ${authorTag}
+                ${item.tags?.slice(0, 4).map((tag) => `<span class="resource-tag">${escapeHtml(tag)}</span>`).join('') || ''}
+                ${item.tags && item.tags.length > 4 ? `<span class="resource-tag">+${item.tags.length - 4} more</span>` : ''}
+              </div>
             </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('');
diff --git a/website/src/scripts/pages/skills-render.ts b/website/src/scripts/pages/skills-render.ts
index 09cdf79e..ce87e7d2 100644
--- a/website/src/scripts/pages/skills-render.ts
+++ b/website/src/scripts/pages/skills-render.ts
@@ -65,31 +65,33 @@ 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)}">
-          <div class="resource-info">
-            <div class="resource-title">${titleHtml}</div>
-            <div class="resource-description">${escapeHtml(
-              item.description || "No description"
-            )}</div>
-            <div class="resource-meta">
-              <span class="resource-tag tag-category">${escapeHtml(
-                item.category
-              )}</span>
-              ${
-                item.hasAssets
-                  ? `<span class="resource-tag tag-assets">${
-                      item.assetCount
-                    } asset${item.assetCount === 1 ? "" : "s"}</span>`
-                  : ""
-              }
-              <span class="resource-tag">${item.files.length} file${
-        item.files.length === 1 ? "" : "s"
-      }</span>
-              ${getLastUpdatedHtml(item.lastUpdated)}
+        )}" 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(
+                item.description || "No description"
+              )}</div>
+              <div class="resource-meta">
+                <span class="resource-tag tag-category">${escapeHtml(
+                  item.category
+                )}</span>
+                ${
+                  item.hasAssets
+                    ? `<span class="resource-tag tag-assets">${
+                        item.assetCount
+                      } asset${item.assetCount === 1 ? "" : "s"}</span>`
+                    : ""
+                }
+                <span class="resource-tag">${item.files.length} file${
+          item.files.length === 1 ? "" : "s"
+        }</span>
+                ${getLastUpdatedHtml(item.lastUpdated)}
+              </div>
             </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("");
diff --git a/website/src/scripts/pages/workflows-render.ts b/website/src/scripts/pages/workflows-render.ts
index 2d77739d..b5ea9844 100644
--- a/website/src/scripts/pages/workflows-render.ts
+++ b/website/src/scripts/pages/workflows-render.ts
@@ -56,20 +56,22 @@ export function renderWorkflowsHtml(
           : escapeHtml(item.title);
 
       return `
-        <div class="resource-item" data-path="${escapeHtml(item.path)}">
-          <div class="resource-info">
-            <div class="resource-title">${titleHtml}</div>
-            <div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
-            <div class="resource-meta">
-              ${item.triggers.map((trigger) => `<span class="resource-tag tag-trigger">${escapeHtml(trigger)}</span>`).join('')}
-              ${getLastUpdatedHtml(item.lastUpdated)}
+        <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>
+              <div class="resource-meta">
+                ${item.triggers.map((trigger) => `<span class="resource-tag tag-trigger">${escapeHtml(trigger)}</span>`).join('')}
+                ${getLastUpdatedHtml(item.lastUpdated)}
+              </div>
             </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('');
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index f00f1413..84aab1c6 100644
--- a/website/src/styles/global.css
+++ b/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 {