From f75b94c63ec7747c0f47a7703f69bbdf89764fd4 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <r_a_m_i@hotmail.com>
Date: Fri, 7 Aug 2026 17:21:02 +0300
Subject: [PATCH] feat(a11y): visual hint for keyboard navigation (#2806)

* feat(a11y): visual hint for keyboard navigation

* updaet

* updaet

* update

---------

Co-authored-by: Paul Jankowski <8bittitan@gmail.com>
---
 examples/demo-react/src/App.css       | 3 ++-
 packages/docsearch-css/src/_askai.css | 6 ++++--
 packages/docsearch-css/src/modal.css  | 6 ++++--
 packages/website/src/css/custom.css   | 9 ++++++---
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/examples/demo-react/src/App.css b/examples/demo-react/src/App.css
index e824f5c0..9fecb2ee 100644
--- a/examples/demo-react/src/App.css
+++ b/examples/demo-react/src/App.css
@@ -208,7 +208,8 @@ main {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
 }
 
-.search-wrapper .DocSearch-Button:hover {
+.search-wrapper .DocSearch-Button:hover,
+.search-wrapper .DocSearch-Button:focus-visible {
   border-color: var(--demo-docsearch-button-hover-border) !important;
   box-shadow: 0 4px 12px var(--demo-docsearch-button-hover-shadow) !important;
   transform: translateY(-1px) !important;
diff --git a/packages/docsearch-css/src/_askai.css b/packages/docsearch-css/src/_askai.css
index ad4d6f7f..3adf6dd9 100644
--- a/packages/docsearch-css/src/_askai.css
+++ b/packages/docsearch-css/src/_askai.css
@@ -816,11 +816,13 @@
   transition: all 0.2s ease;
 }
 
-.DocSearch-AskAiScreen-Sources-source a:hover {
+.DocSearch-AskAiScreen-Sources-source a:hover,
+.DocSearch-AskAiScreen-Sources-source a:focus-visible {
   text-decoration: underline;
 }
 
-.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/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css
index 3169b63d..809921e7 100644
--- a/packages/docsearch-css/src/modal.css
+++ b/packages/docsearch-css/src/modal.css
@@ -145,7 +145,8 @@
   color: var(--docsearch-text-color);
 }
 
-.DocSearch-Popover-Close:hover {
+.DocSearch-Popover-Close:hover,
+.DocSearch-Popover-Close:focus-visible {
   color: var(--docsearch-highlight-color);
   background: var(--docsearch-soft-primary-color);
 }
@@ -550,7 +551,8 @@
   display: none;
 }
 
-.DocSearch-Action:hover {
+.DocSearch-Action:hover,
+.DocSearch-Action:focus-visible {
   color: var(--docsearch-highlight-color);
   background: var(--docsearch-soft-primary-color);
 }
diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
index 6cd667ac..97680f17 100644
--- a/packages/website/src/css/custom.css
+++ b/packages/website/src/css/custom.css
@@ -442,7 +442,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;
 }
@@ -549,12 +550,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;
 }