feat(search-pro): improve search button a11y

vuepress-theme-hope · Jan 4, 2023 · 8629ee5 · 8629ee5
1 parent 32ca686
commit 8629ee5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/search-pro/src/client/components/SearchBox.ts b/packages/search-pro/src/client/components/SearchBox.ts
@@ -37,7 +37,7 @@ export default defineComponent({
 
     return (): (VNode | null)[] => [
       h(
-        "div",
+        "button",
         {
           class: "search-pro-button",
           role: "search",

diff --git a/packages/search-pro/src/client/styles/search-box.scss b/packages/search-pro/src/client/styles/search-box.scss
@@ -1,11 +1,15 @@
-.search-pro-button {
-  inset-inline-start: 16px;
+@use "vuepress-shared/styles/reset";
 
+.search-pro-button {
+  @include reset.button;
   display: inline-block;
 
+  box-sizing: content-box;
+
   width: 20px;
   height: 20px;
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
   padding: 8px;
   border: 0;
   border-radius: 50%;
@@ -19,6 +23,8 @@
   transition: background var(--t-color, 0.3s ease),
     color var(--t-color, 0.3s ease);
 
+  margin-inline: 16px 0;
+
   @media print {
     display: none;
   }