diff --git a/examples/demo-react/src/App.css b/examples/demo-react/src/App.css index 3a4e05522..0a2517343 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 8b0bf53cc..0ab900af3 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); } @@ -1127,7 +1129,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 1c836b7b3..e6bbfb2a6 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; }