From 2196d2e0ac663eb599ef708d5a50618f0b9c22b2 Mon Sep 17 00:00:00 2001
From: Codex <codex@users.noreply.github.com>
Date: Wed, 2 Sep 2026 11:41:16 +0800
Subject: [PATCH] fix: make Algolia load more keyboard accessible

---
 examples/react/algolia/src/SearchResults.tsx | 8 ++++++--
 examples/react/algolia/src/styles.css        | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/examples/react/algolia/src/SearchResults.tsx b/examples/react/algolia/src/SearchResults.tsx
index 3592810f709..ac7661df4ce 100644
--- a/examples/react/algolia/src/SearchResults.tsx
+++ b/examples/react/algolia/src/SearchResults.tsx
@@ -59,9 +59,13 @@ export default function SearchResults({ query = '' }: SearchResultsProps) {
           )}
         </div>
         {hasNextPage && (
-          <div className="search-more" onClick={() => fetchNextPage()}>
+          <button
+            type="button"
+            className="search-more"
+            onClick={() => fetchNextPage()}
+          >
             more
-          </div>
+          </button>
         )}
         {isFetchingNextPage && (
           <div className="search-status">Fetching next page...</div>
diff --git a/examples/react/algolia/src/styles.css b/examples/react/algolia/src/styles.css
index a283154bfde..fde6652c882 100644
--- a/examples/react/algolia/src/styles.css
+++ b/examples/react/algolia/src/styles.css
@@ -22,7 +22,11 @@
 }
 
 .search-more {
+  appearance: none;
+  background: none;
+  border: 0;
   color: blue;
+  font: inherit;
   padding-left: 20px;
   padding-top: 20px;
   cursor: pointer;
@@ -30,6 +34,11 @@
   text-transform: uppercase;
 }
 
+.search-more:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
 .product {
   padding-bottom: 5px;
 }