fix: add focus-visible rule to buttons

SevenTV · Sep 5, 2022 · d477b3d · d477b3d
1 parent a90fb5f
commit d477b3d
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
@@ -364,6 +364,8 @@ const onRename = (set: EmoteSet | null) => {
 			@include themify() {
 				> button[selector="card-details"] {
 					background-color: darken(themed("backgroundColor"), 4);
+					transition: outline-color 100ms;
+					outline-color: transparent;
 
 					&[selected="true"] {
 						background-color: mix(themed("backgroundColor"), themed("primary"), 85%);
@@ -375,6 +377,10 @@ const onRename = (set: EmoteSet | null) => {
 						background-color: darken(themed("backgroundColor"), 8);
 					}
 
+					&:focus-visible {
+						outline: themed("primary") 2px solid;
+					}
+
 					> div > div[selector="set-name"] > div[selector="label-list"] {
 						> span[label] {
 							background-color: themed("backgroundColor");
@@ -398,6 +404,12 @@ const onRename = (set: EmoteSet | null) => {
 					align-items: center;
 					justify-content: center;
 					background-color: darken(themed("backgroundColor"), 4);
+					transition: outline-color 100ms;
+					outline-color: transparent;
+
+					&:focus-visible {
+						outline: themed("primary") 2px solid;
+					}
 				}
 			}