Add visibility on buttons focus

2026-03-06 20:13:13 +08:00 · 2024-04-19 20:35:24 +02:00
parent 42d3bd9e8c
commit 4f4ffe3e3a
4 changed files with 16 additions and 0 deletions
--- a/src/components/about/about.module.css
+++ b/src/components/about/about.module.css
@@ -86,5 +86,9 @@
    &:hover {
      background-color: var(--color-neutral-100);
    }
+
+    &:focus-visible {
+      outline: 1px solid white;
+    }
  }
 }
--- a/src/components/buttons/play/play.module.css
+++ b/src/components/buttons/play/play.module.css
@@ -27,4 +27,8 @@
  & span {
    font-size: var(--font-lg);
  }
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
 }
--- a/src/components/buttons/unselect/unselect.module.css
+++ b/src/components/buttons/unselect/unselect.module.css
@@ -23,6 +23,10 @@
  &:hover {
    background-color: var(--color-neutral-200);
  }
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
 }

 .tooltip {
--- a/src/components/sound/favorite/favorite.module.css
+++ b/src/components/sound/favorite/favorite.module.css
@@ -24,4 +24,8 @@
  &.isFavorite {
    color: var(--color-foreground);
  }
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
 }