From a300b89f59fdfa6af3874697aded66eed0e3d7bc Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <r_a_m_i@hotmail.com>
Date: Sun, 23 Nov 2025 21:17:43 +0200
Subject: [PATCH] feat(a11y): visual hint for keyboard navigation

---
 examples/demo-react/src/App.css      | 3 ++-
 packages/docsearch-css/src/modal.css | 7 +++++--
 packages/website/src/css/custom.css  | 9 ++++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/examples/demo-react/src/App.css b/examples/demo-react/src/App.css
index 5e9f2e1d09..a0608ba2a2 100644
--- a/examples/demo-react/src/App.css
+++ b/examples/demo-react/src/App.css
@@ -125,7 +125,8 @@ main {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
 }
 
-.DocSearch-Button:hover {
+.DocSearch-Button:hover,
+.DocSearch-Button:focus-visible {
   border-color: #667eea !important;
   box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
   transform: translateY(-1px) !important;
diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css
index 3e3467b153..873e698516 100644
--- a/packages/docsearch-css/src/modal.css
+++ b/packages/docsearch-css/src/modal.css
@@ -201,7 +201,9 @@
 }
 
 .DocSearch-Action:hover,
-.DocSearch-AskAi-Return:hover {
+.DocSearch-Action:focus-visible,
+.DocSearch-AskAi-Return:hover,
+.DocSearch-AskAi-Return:focus-visible {
   color: var(--docsearch-highlight-color);
   background: var(--docsearch-soft-primary-color);
 }
@@ -1126,7 +1128,8 @@ assistive tech users */
   transition: all 0.2s ease;
 }
 
-.DocSearch-Markdown-Content a:hover {
+.DocSearch-Markdown-Content a:hover,
+.DocSearch-Markdown-Content a:focus-visible {
   text-decoration: underline;
   opacity: 0.9;
 }
diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
index 5443e37292..387b51665a 100644
--- a/packages/website/src/css/custom.css
+++ b/packages/website/src/css/custom.css
@@ -313,7 +313,8 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   transition: all 0.2s ease-in-out;
 }
 
-.theme-announcement-bar a:hover {
+.theme-announcement-bar a:hover,
+.theme-announcement-bar a:focus-visible {
   background-color: var(--ifm-color-primary);
   color: #fff;
 }
@@ -430,12 +431,14 @@ html[data-theme='dark'] .docsearch-logo {
   color: #fff;
 }
 
-.apply-button:hover {
+.apply-button:hover,
+.apply-button:focus-visible {
   color: #fff;
 }
 
 /* GitHub */
-.header-github-link:hover {
+.header-github-link:hover,
+.header-github-link:focus-visible {
   opacity: 0.6;
 }