fix(button): Fixes default button styling accessibility (#2814)

Author: 8bittitan

examples/demo-react/src/App.css

@@ -80,7 +80,8 @@ main {
 }
 
 /* search component wrapper */
-.search-wrapper {
+.search-wrapper,
+.default-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -114,7 +115,7 @@ main {
 }
 
 /* docsearch button customization */
-.DocSearch-Button {
+.search-wrapper .DocSearch-Button {
   margin: 0 !important;
   background: #f7fafc !important;
   border: 2px solid #e2e8f0 !important;
@@ -125,13 +126,13 @@ main {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
 }
 
-.DocSearch-Button:hover {
+.search-wrapper .DocSearch-Button:hover {
   border-color: #667eea !important;
   box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
   transform: translateY(-1px) !important;
 }
 
-.DocSearch-Button-Placeholder {
+.search-wrapper .DocSearch-Button-Placeholder {
   color: #718096 !important;
 }
 

examples/demo-react/src/App.tsx

@@ -8,6 +8,7 @@ import '@docsearch/css/dist/style.css';
 import Basic from './examples/basic';
 import BasicAskAI from './examples/basic-askai';
 import Composable from './examples/composable';
+import Default from './examples/default';
 import DynamicImportModal from './examples/dynamic-import-modal';
 import MultiIndex from './examples/multi-index';
 import WHitComponent from './examples/w-hit-component';
@@ -24,6 +25,13 @@ function App(): JSX.Element {
         </header>
 
         <main>
+          <section className="demo-section">
+            <p className="section-description">default</p>
+            <div className="default-wrapper">
+              <Default />
+            </div>
+          </section>
+
           <section className="demo-section">
             <p className="section-description">basic search functionality</p>
             <div className="search-wrapper">

examples/demo-react/src/examples/default.tsx

@@ -0,0 +1,7 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { DocSearch } from '@docsearch/react';
+import type { JSX } from 'react';
+
+export default function DefaultExperience(): JSX.Element {
+  return <DocSearch indexName="docsearch" appId="PMZUYBQDAK" apiKey="24b09689d5b4223813d9b8e48563c8f6" />;
+}

packages/docsearch-css/src/_variables.css

@@ -20,6 +20,10 @@
   --docsearch-logo-color: rgba(0, 61, 255, 1);
   --docsearch-border-radius: 4px;
 
+  /* button */
+  --docsearch-search-button-background: #fff;
+  --docsearch-search-button-text-color: var(--docsearch-secondary-text-color);
+
   /* modal */
   --docsearch-modal-width: 800px;
   --docsearch-modal-height: 600px;
@@ -111,4 +115,6 @@ html[data-theme='dark'] {
   );
   --docsearch-dropdown-menu-background: var(--docsearch-hit-background);
   --docsearch-dropdown-menu-item-hover-background: var(--docsearch-modal-background);
+  --docsearch-search-button-background: var(--docsearch-modal-background);
+  --docsearch-search-button-text-color: var(--docsearch-text-color);
 }

packages/docsearch-css/src/button.css

@@ -2,8 +2,8 @@
   align-items: center;
   border: 1px solid var(--docsearch-subtle-color);
   border-radius: 4px;
-  background-color: var(--docsearch-searchbox-background);
-  color: var(--docsearch-muted-color);
+  background-color: var(--docsearch-search-button-background);
+  color: var(--docsearch-search-button-text-color);
   cursor: pointer;
   display: flex;
   all: unset;
@@ -20,7 +20,7 @@
 }
 
 .DocSearch-Button-Container svg {
-  color: var(--docsearch-muted-color);
+  color: currentColor;
 }
 
 .DocSearch-Search-Icon {
@@ -37,7 +37,7 @@
   font-size: 1rem;
   padding-block: 0;
   padding-inline: 8px 12px;
-  color: var(--docsearch-muted-color);
+  color: currentColor;
   display: inline-block;
   line-height: normal;
 }