docs: add focus outline to checkboxes for accessibility (#1994)

vueuse · Jul 27, 2022 · 6c46177 · 6c46177
1 parent dbfd001
commit 6c46177
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/.vitepress/theme/components/FunctionsList.vue b/packages/.vitepress/theme/components/FunctionsList.vue
@@ -177,12 +177,13 @@ input {
 }
 
 .checkbox {
-  @apply inline-flex items-center my-auto cursor-pointer select-none;
+  @apply inline-flex items-center my-auto cursor-pointer select-none rounded px-2;
 }
 
 .checkbox input {
   appearance: none;
   padding: 0;
+  margin: 0;
   -webkit-print-color-adjust: exact;
   color-adjust: exact;
   display: inline-block;

diff --git a/packages/.vitepress/theme/styles/main.css b/packages/.vitepress/theme/styles/main.css
@@ -14,3 +14,9 @@ html.dark {
 .VPSidebarGroup .link {
   padding: 3px 0 !important;
 }
+
+#app a:focus-visible,
+#app button:focus-visible,
+#app input[type="checkbox"]:focus-visible {
+  @apply outline-1 outline-primary ring-2 ring-primary;
+}